From 09bf07fd68756c8393bddd4c9651ab7a61b95f78 Mon Sep 17 00:00:00 2001
From: Dusko Peric <dule@teretane.net>
Date: Tue, 15 Jul 2025 23:59:09 +0200
Subject: [PATCH] api pages responsive

---
 .../app/components/docs/symbol-header.component.ts |  3 +++
 .../src/app/components/docs/symbol.component.ts    | 10 ++++++++++
 projects/www/src/app/pages/api/index.page.ts       | 14 +++++++++++++-
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/projects/www/src/app/components/docs/symbol-header.component.ts b/projects/www/src/app/components/docs/symbol-header.component.ts
index ccd9f06ea6..92f97635fe 100644
--- a/projects/www/src/app/components/docs/symbol-header.component.ts
+++ b/projects/www/src/app/components/docs/symbol-header.component.ts
@@ -28,6 +28,9 @@ import { DeprecatedChipComponent } from './deprecated-chip.component';
         align-items: center;
         padding: 16px;
         gap: 16px;
+        @media only screen and (max-width: 600px) {
+          grid-template-columns: 1fr;
+        }
       }
 
       h3 {
diff --git a/projects/www/src/app/components/docs/symbol.component.ts b/projects/www/src/app/components/docs/symbol.component.ts
index 729e2e515a..5aaaa326b6 100644
--- a/projects/www/src/app/components/docs/symbol.component.ts
+++ b/projects/www/src/app/components/docs/symbol.component.ts
@@ -44,16 +44,26 @@ import { SymbolUsageNotesComponent } from './symbol-usage-notes.component';
         max-width: 960px;
         margin: 0 auto;
         padding: 54px 0 24px;
+        @media only screen and (max-width: 1280px) {
+          padding: 90px 30px 24px;
+          max-width: 100%;
+        }
       }
 
       .header {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        @media only screen and (max-width: 600px) {
+          flex-wrap: wrap;
+        }
       }
 
       h1 {
         margin: 0;
+        @media only screen and (max-width: 600px) {
+          margin-bottom: 10px;
+        }
       }
 
       .symbol-call-signature {
diff --git a/projects/www/src/app/pages/api/index.page.ts b/projects/www/src/app/pages/api/index.page.ts
index cea966a665..a6b4553d29 100644
--- a/projects/www/src/app/pages/api/index.page.ts
+++ b/projects/www/src/app/pages/api/index.page.ts
@@ -48,6 +48,9 @@ import { MinimizedApiMemberSummary } from '@ngrx-io/shared';
       :host {
         display: block;
         padding: 0 24px 24px;
+        @media only screen and (max-width: 1280px) {
+          padding-top: 62px;
+        }
       }
 
       .controls {
@@ -60,8 +63,11 @@ import { MinimizedApiMemberSummary } from '@ngrx-io/shared';
         border-bottom: 1px solid rgba(255, 255, 255, 0.12);
         position: sticky;
         top: 0;
-        z-index: 10;
+        z-index: 1;
         background-color: #17111a;
+        @media only screen and (max-width: 1280px) {
+          top: 62px;
+        }
       }
 
       h3 {
@@ -100,6 +106,12 @@ import { MinimizedApiMemberSummary } from '@ngrx-io/shared';
         grid-template-columns: repeat(3, 1fr);
         gap: 16px;
         border-left: 1px solid rgba(255, 255, 255, 0.12);
+        @media only screen and (max-width: 1280px) {
+          grid-template-columns: repeat(2, 1fr);
+        }
+        @media only screen and (max-width: 700px) {
+          grid-template-columns: 1fr;
+        }
       }
     `,
   ],