From 98d8571d37bc828d9d264fc96b330b663cbbd8e6 Mon Sep 17 00:00:00 2001
From: Lovly <youssef@gameboost.com>
Date: Wed, 27 May 2026 15:47:11 +0200
Subject: [PATCH 1/4] Make portal UI responsive for small viewports

Add responsive styles and small-viewport behavior across the portal UI. Key changes:

- app.scss: responsive paddings, loading margins, header layout and small-viewport positioning.
- global.scss: add $BREAKPOINT_* variables, prevent iOS zoom on inputs, hide horizontal overflow.
- Sidebar: overlay behavior below 1024px, backdrop element, mobile full-width sidebar and z-index (SCSS + Sidebar.tsx portal markup).
- Table: enable horizontal scrolling on narrow screens and set CSS var --table-min-width computed in Table.tsx (adds fallback column width calculation).
- MetricsBreakdown: constrain label widths on mobile.
- Scenes (CreateDestination, Destination, DestinationSettings, Attempts, DestinationsList): multiple layout, wrapping, grid and spacing adjustments for tablet/mobile viewports; improved wrapping for long values and tooltips.

These changes improve usability on tablet/phone widths and add safeguards for mobile browsers.
---
 internal/portal/src/app.scss                  | 24 +++++++++
 .../common/MetricsChart/MetricsBreakdown.scss |  5 ++
 .../portal/src/common/Sidebar/Sidebar.scss    | 25 ++++++++++
 .../portal/src/common/Sidebar/Sidebar.tsx     | 15 +++---
 internal/portal/src/common/Table/Table.scss   | 17 +++++++
 internal/portal/src/common/Table/Table.tsx    | 15 +++++-
 internal/portal/src/global.scss               | 16 ++++++
 .../CreateDestination/CreateDestination.scss  | 17 +++++++
 .../src/scenes/Destination/Destination.scss   | 50 +++++++++++++++++++
 .../DestinationSettings.scss                  |  6 +++
 .../scenes/Destination/Events/Attempts.scss   | 22 ++++++++
 .../DestinationsList/DestinationList.scss     | 13 +++++
 12 files changed, 218 insertions(+), 7 deletions(-)

diff --git a/internal/portal/src/app.scss b/internal/portal/src/app.scss
index 068150dd1..2e6db8fb0 100644
--- a/internal/portal/src/app.scss
+++ b/internal/portal/src/app.scss
@@ -8,6 +8,16 @@
   padding-left: calc(var(--base-grid-multiplier) * 24);
   padding-right: calc(var(--base-grid-multiplier) * 24);
 
+  @media (max-width: 1024px) {
+    padding-left: var(--spacing-6);
+    padding-right: var(--spacing-6);
+  }
+
+  @media (max-width: 640px) {
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
+  }
+
   &__loading {
     display: flex;
     justify-content: center;
@@ -23,6 +33,11 @@
     margin-top: calc(var(--base-grid-multiplier) * 20);
     margin-bottom: calc(var(--base-grid-multiplier) * 12);
 
+    @media (max-width: 640px) {
+      margin-top: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+    }
+
     a {
       color: var(--colors-foreground-neutral-3);
       text-decoration: none;
@@ -46,6 +61,9 @@
     display: flex;
     gap: var(--spacing-2);
     color: var(--colors-foreground-neutral-3);
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
 
     span,
     a {
@@ -66,6 +84,12 @@
   left: var(--spacing-4);
   color: var(--colors-foreground-neutral-2);
 
+  @media (max-width: 640px) {
+    position: static;
+    text-align: center;
+    padding: var(--spacing-4);
+  }
+
   a {
     color: var(--colors-foreground-neutral-2);
     text-decoration: none;
diff --git a/internal/portal/src/common/MetricsChart/MetricsBreakdown.scss b/internal/portal/src/common/MetricsChart/MetricsBreakdown.scss
index 48e5489ce..7461098ed 100644
--- a/internal/portal/src/common/MetricsChart/MetricsBreakdown.scss
+++ b/internal/portal/src/common/MetricsChart/MetricsBreakdown.scss
@@ -46,6 +46,11 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    @media (max-width: 640px) {
+      min-width: 72px;
+      max-width: 72px;
+    }
   }
 
   &__bar-container {
diff --git a/internal/portal/src/common/Sidebar/Sidebar.scss b/internal/portal/src/common/Sidebar/Sidebar.scss
index df3beef8d..219c31470 100644
--- a/internal/portal/src/common/Sidebar/Sidebar.scss
+++ b/internal/portal/src/common/Sidebar/Sidebar.scss
@@ -1,5 +1,22 @@
 .sidebar-open #root {
   margin-right: 408px;
+
+  // Below 1024px the sidebar overlays content instead of pushing it.
+  @media (max-width: 1024px) {
+    margin-right: 0;
+  }
+}
+
+#sidebar-backdrop {
+  display: none;
+
+  @media (max-width: 1024px) {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.32);
+    z-index: 9;
+  }
 }
 
 #sidebar {
@@ -12,6 +29,14 @@
   border-left: 1px solid var(--colors-outline-neutral);
   overflow-y: auto;
   box-sizing: border-box;
+  background: var(--colors-background);
+  z-index: 10;
+
+  @media (max-width: 640px) {
+    width: 100vw;
+    max-width: 100vw;
+    padding: var(--spacing-4);
+  }
 
   .close-button {
     margin-left: calc(var(--spacing-2) * -1);
diff --git a/internal/portal/src/common/Sidebar/Sidebar.tsx b/internal/portal/src/common/Sidebar/Sidebar.tsx
index c97e5c168..62a31b1c7 100644
--- a/internal/portal/src/common/Sidebar/Sidebar.tsx
+++ b/internal/portal/src/common/Sidebar/Sidebar.tsx
@@ -78,12 +78,15 @@ const SidebarPortal = ({
   }
 
   return createPortal(
-    <div id="sidebar">
-      <Button minimal onClick={onClose} className="close-button">
-        <CollapseIcon />
-      </Button>
-      {state.content}
-    </div>,
+    <>
+      <div id="sidebar-backdrop" onClick={onClose} aria-hidden="true" />
+      <div id="sidebar">
+        <Button minimal onClick={onClose} className="close-button">
+          <CollapseIcon />
+        </Button>
+        {state.content}
+      </div>
+    </>,
     document.body,
   );
 };
diff --git a/internal/portal/src/common/Table/Table.scss b/internal/portal/src/common/Table/Table.scss
index f6118fa9c..aafabfb34 100644
--- a/internal/portal/src/common/Table/Table.scss
+++ b/internal/portal/src/common/Table/Table.scss
@@ -6,6 +6,23 @@
   border: 1px solid var(--colors-outline-neutral);
   background-color: var(--colors-background);
 
+  @media (max-width: 1024px) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+
+    .table__header,
+    .table__body,
+    .table__body-row,
+    .table__footer {
+      min-width: var(--table-min-width, max-content);
+    }
+
+    .table__body {
+      overflow-x: visible;
+    }
+  }
+
   &__header {
     display: grid;
     background-color: var(--colors-background-neutral-2);
diff --git a/internal/portal/src/common/Table/Table.tsx b/internal/portal/src/common/Table/Table.tsx
index f4702f160..35f70b575 100644
--- a/internal/portal/src/common/Table/Table.tsx
+++ b/internal/portal/src/common/Table/Table.tsx
@@ -37,8 +37,21 @@ const Table: React.FC<TableProps> = ({
     .map((column) => (column.width ? `${column.width}px` : "1fr"))
     .join(" ");
 
+  const fallback_flex_column_width = 160;
+  const table_min_width = columns.reduce(
+    (sum, column) => sum + (column.width ?? fallback_flex_column_width),
+    0,
+  );
+
   return (
-    <div className="table">
+    <div
+      className="table"
+      style={
+        {
+          "--table-min-width": `${table_min_width}px`,
+        } as React.CSSProperties
+      }
+    >
       <div
         className="table__header"
         style={{
diff --git a/internal/portal/src/global.scss b/internal/portal/src/global.scss
index d95b86d9f..691fd67b7 100644
--- a/internal/portal/src/global.scss
+++ b/internal/portal/src/global.scss
@@ -4,6 +4,10 @@ $BASE_GRID_MULTIPLIER: 4px !default;
 $RADIUS_S: 4px !default;
 $RADIUS_M: 6px !default;
 
+// Responsive breakpoints
+$BREAKPOINT_MOBILE: 640px !default;
+$BREAKPOINT_TABLET: 1024px !default;
+
 // Background Colors
 
 /// Neutral
@@ -352,6 +356,18 @@ body {
   margin: 0;
   background: var(--colors-background);
   font-size: 1rem;
+  overflow-x: hidden;
+  -webkit-text-size-adjust: 100%;
+}
+
+// Prevent iOS Safari from zooming the viewport when focusing inputs:
+// browsers only zoom inputs whose computed font-size is < 16px.
+@media (max-width: $BREAKPOINT_MOBILE) {
+  input,
+  textarea,
+  select {
+    font-size: 16px;
+  }
 }
 
 @mixin generate-spacing-variables {
diff --git a/internal/portal/src/scenes/CreateDestination/CreateDestination.scss b/internal/portal/src/scenes/CreateDestination/CreateDestination.scss
index 34fe78225..8af7afed9 100644
--- a/internal/portal/src/scenes/CreateDestination/CreateDestination.scss
+++ b/internal/portal/src/scenes/CreateDestination/CreateDestination.scss
@@ -7,6 +7,12 @@
   flex-direction: row;
   padding-top: calc(var(--base-grid-multiplier) * 18);
 
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-8);
+    padding-top: var(--spacing-8);
+  }
+
   &__sidebar {
     display: flex;
     flex-direction: column;
@@ -14,6 +20,11 @@
     top: calc(var(--base-grid-multiplier) * 18);
     align-self: start;
 
+    @media (max-width: 1024px) {
+      position: static;
+      top: auto;
+    }
+
     &__steps {
       margin-top: var(--spacing-8);
       margin-left: var(--spacing-2);
@@ -72,6 +83,12 @@
         ~ p {
           margin-top: 0;
         }
+
+        @media (max-width: 640px) {
+          margin-top: var(--spacing-4);
+          font-size: var(--font-size-2xl);
+          line-height: var(--line-height-2xl);
+        }
       }
     }
 
diff --git a/internal/portal/src/scenes/Destination/Destination.scss b/internal/portal/src/scenes/Destination/Destination.scss
index b132dcd4c..76a21edc9 100644
--- a/internal/portal/src/scenes/Destination/Destination.scss
+++ b/internal/portal/src/scenes/Destination/Destination.scss
@@ -3,6 +3,10 @@
   align-items: center;
   gap: var(--spacing-6);
 
+  @media (max-width: 640px) {
+    gap: var(--spacing-4);
+  }
+
   &__icon {
     display: flex;
     align-items: center;
@@ -38,11 +42,21 @@
 .tabs-container {
   margin-top: 24px;
   border-bottom: 1px solid var(--colors-outline-neutral);
+
+  @media (max-width: 640px) {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 .tabs {
   display: flex;
   gap: var(--spacing-4);
+
+  @media (max-width: 640px) {
+    gap: var(--spacing-2);
+    white-space: nowrap;
+  }
 }
 
 .tab {
@@ -91,6 +105,21 @@
         align-items: center;
         gap: var(--spacing-1);
       }
+
+      @media (max-width: 640px) {
+        flex-direction: column;
+        gap: var(--spacing-1);
+
+        > span:first-child {
+          width: auto;
+          min-width: 0;
+        }
+
+        > span:last-child {
+          min-width: 0;
+          word-break: break-word;
+        }
+      }
     }
   }
 }
@@ -132,6 +161,8 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: var(--spacing-4);
+    gap: var(--spacing-3);
+    flex-wrap: wrap;
 
     h2 {
       margin: 0;
@@ -178,6 +209,15 @@
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: var(--spacing-6);
+
+    @media (max-width: 1024px) {
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--spacing-4);
+    }
+
+    @media (max-width: 640px) {
+      grid-template-columns: 1fr;
+    }
   }
 
   &__cell {
@@ -196,5 +236,15 @@
     &--row2-half {
       grid-column: span 3;
     }
+
+    @media (max-width: 1024px) {
+      grid-column: span 1 !important;
+      padding: var(--spacing-4);
+    }
+
+    @media (max-width: 640px) {
+      height: auto;
+      min-height: 280px;
+    }
   }
 }
diff --git a/internal/portal/src/scenes/Destination/DestinationSettings/DestinationSettings.scss b/internal/portal/src/scenes/Destination/DestinationSettings/DestinationSettings.scss
index 972777d73..a0ac9def7 100644
--- a/internal/portal/src/scenes/Destination/DestinationSettings/DestinationSettings.scss
+++ b/internal/portal/src/scenes/Destination/DestinationSettings/DestinationSettings.scss
@@ -46,6 +46,12 @@
     display: flex;
     gap: var(--spacing-3);
     margin-top: var(--spacing-4);
+    flex-wrap: wrap;
+
+    @media (max-width: 640px) {
+      flex-direction: column;
+      align-items: stretch;
+    }
   }
 
   &__actions {
diff --git a/internal/portal/src/scenes/Destination/Events/Attempts.scss b/internal/portal/src/scenes/Destination/Events/Attempts.scss
index 5d37d6d22..d73fe7cb8 100644
--- a/internal/portal/src/scenes/Destination/Events/Attempts.scss
+++ b/internal/portal/src/scenes/Destination/Events/Attempts.scss
@@ -14,11 +14,13 @@
     align-items: center;
     gap: var(--spacing-2);
     justify-content: space-between;
+    flex-wrap: wrap;
 
     &-filters {
       display: flex;
       align-items: center;
       gap: var(--spacing-3);
+      flex-wrap: wrap;
     }
 
     &-title .badge {
@@ -70,10 +72,21 @@
     &--active {
       grid-template-columns: 1fr 516px;
 
+      @media (max-width: 1024px) {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto;
+      }
+
       .table {
         height: 100%;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
+
+        @media (max-width: 1024px) {
+          border-radius: var(--radius-m);
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
       }
 
       .drawer {
@@ -85,6 +98,12 @@
         border-top-right-radius: var(--radius-m);
         border-bottom-right-radius: var(--radius-m);
 
+        @media (max-width: 1024px) {
+          border-top: none;
+          border-radius: 0 0 var(--radius-m) var(--radius-m);
+          max-height: 60vh;
+        }
+
         &__header {
           display: flex;
           align-items: center;
@@ -159,6 +178,9 @@ dl.description-list {
     padding-top: var(--spacing-4);
     padding-bottom: var(--spacing-4);
     border-bottom: 1px solid var(--colors-outline-neutral);
+    // Allow long values (e.g. IDs, URLs) to wrap onto a new line under the
+    // label on narrow viewports without forcing every row to stack.
+    flex-wrap: wrap;
 
     &:last-child {
       border-bottom: none;
diff --git a/internal/portal/src/scenes/DestinationsList/DestinationList.scss b/internal/portal/src/scenes/DestinationsList/DestinationList.scss
index d3b1d0840..c24b4ce09 100644
--- a/internal/portal/src/scenes/DestinationsList/DestinationList.scss
+++ b/internal/portal/src/scenes/DestinationsList/DestinationList.scss
@@ -17,10 +17,18 @@
   &__actions {
     display: flex;
     gap: var(--spacing-2);
+    flex-wrap: wrap;
 
     *:last-child {
       margin-left: auto;
     }
+
+    @media (max-width: 640px) {
+      *:last-child {
+        margin-left: 0;
+        width: 100%;
+      }
+    }
   }
 
   &__topics-tooltip {
@@ -37,6 +45,11 @@
   border: 1px dashed var(--colors-outline-neutral);
   border-radius: var(--radius-m);
   padding: var(--spacing-14);
+
+  @media (max-width: 640px) {
+    padding: var(--spacing-8) var(--spacing-4);
+    text-align: center;
+  }
 }
 
 .dropdown-item {

From bc545e8310fba01da46fd65177f2bd2c9859e991 Mon Sep 17 00:00:00 2001
From: Lovly <youssef@gameboost.com>
Date: Wed, 27 May 2026 20:11:15 +0200
Subject: [PATCH 2/4] Rename table vars to camelCase and simplify breakpoint

Rename Table component variables to use camelCase (fallbackFlexColumnWidth, tableMinWidth) and update the CSS custom property usage accordingly. In global.scss, remove previously defined breakpoint variables and replace the breakpoint reference with a hardcoded 640px in the media query. These changes improve naming consistency in the React code and simplify the responsive media query reference.
---
 internal/portal/src/common/Table/Table.tsx | 8 ++++----
 internal/portal/src/global.scss            | 6 +-----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/internal/portal/src/common/Table/Table.tsx b/internal/portal/src/common/Table/Table.tsx
index 35f70b575..57f132903 100644
--- a/internal/portal/src/common/Table/Table.tsx
+++ b/internal/portal/src/common/Table/Table.tsx
@@ -37,9 +37,9 @@ const Table: React.FC<TableProps> = ({
     .map((column) => (column.width ? `${column.width}px` : "1fr"))
     .join(" ");
 
-  const fallback_flex_column_width = 160;
-  const table_min_width = columns.reduce(
-    (sum, column) => sum + (column.width ?? fallback_flex_column_width),
+  const fallbackFlexColumnWidth = 160;
+  const tableMinWidth = columns.reduce(
+    (sum, column) => sum + (column.width ?? fallbackFlexColumnWidth),
     0,
   );
 
@@ -48,7 +48,7 @@ const Table: React.FC<TableProps> = ({
       className="table"
       style={
         {
-          "--table-min-width": `${table_min_width}px`,
+          "--table-min-width": `${tableMinWidth}px`,
         } as React.CSSProperties
       }
     >
diff --git a/internal/portal/src/global.scss b/internal/portal/src/global.scss
index 691fd67b7..999489963 100644
--- a/internal/portal/src/global.scss
+++ b/internal/portal/src/global.scss
@@ -4,10 +4,6 @@ $BASE_GRID_MULTIPLIER: 4px !default;
 $RADIUS_S: 4px !default;
 $RADIUS_M: 6px !default;
 
-// Responsive breakpoints
-$BREAKPOINT_MOBILE: 640px !default;
-$BREAKPOINT_TABLET: 1024px !default;
-
 // Background Colors
 
 /// Neutral
@@ -362,7 +358,7 @@ body {
 
 // Prevent iOS Safari from zooming the viewport when focusing inputs:
 // browsers only zoom inputs whose computed font-size is < 16px.
-@media (max-width: $BREAKPOINT_MOBILE) {
+@media (max-width: 640px) {
   input,
   textarea,
   select {

From dc673df13cea2bb7d1c3fc42ae707a32c47478a6 Mon Sep 17 00:00:00 2001
From: Alexandre Bouchard <alexbouchardd@gmail.com>
Date: Thu, 28 May 2026 15:06:35 -0400
Subject: [PATCH 3/4] fix: Mobile destination list display fix

---
 internal/portal/src/common/SearchInput/SearchInput.scss       | 2 ++
 .../portal/src/scenes/DestinationsList/DestinationList.scss   | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/internal/portal/src/common/SearchInput/SearchInput.scss b/internal/portal/src/common/SearchInput/SearchInput.scss
index 34927a7f4..3dc192543 100644
--- a/internal/portal/src/common/SearchInput/SearchInput.scss
+++ b/internal/portal/src/common/SearchInput/SearchInput.scss
@@ -6,6 +6,8 @@
   padding-right: var(--spacing-8);
   padding-left: var(--spacing-9);
   min-width: 368px;
+  width: 100%;
+  box-sizing: border-box;
   &::placeholder {
     color: var(--colors-foreground-neutral-3);
   }
diff --git a/internal/portal/src/scenes/DestinationsList/DestinationList.scss b/internal/portal/src/scenes/DestinationsList/DestinationList.scss
index c24b4ce09..6b8d7b855 100644
--- a/internal/portal/src/scenes/DestinationsList/DestinationList.scss
+++ b/internal/portal/src/scenes/DestinationsList/DestinationList.scss
@@ -24,9 +24,11 @@
     }
 
     @media (max-width: 640px) {
+      .search_input_container {
+        width: 100%;
+      }
       *:last-child {
         margin-left: 0;
-        width: 100%;
       }
     }
   }

From ff1030b09c9878afadfc2a9301c07aceeec49038 Mon Sep 17 00:00:00 2001
From: Alexandre Bouchard <alexbouchardd@gmail.com>
Date: Thu, 28 May 2026 15:13:52 -0400
Subject: [PATCH 4/4] fix: Fix search input display issue

---
 .../portal/src/scenes/DestinationsList/DestinationList.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/internal/portal/src/scenes/DestinationsList/DestinationList.scss b/internal/portal/src/scenes/DestinationsList/DestinationList.scss
index 6b8d7b855..0de20f727 100644
--- a/internal/portal/src/scenes/DestinationsList/DestinationList.scss
+++ b/internal/portal/src/scenes/DestinationsList/DestinationList.scss
@@ -25,8 +25,14 @@
 
     @media (max-width: 640px) {
       .search_input_container {
+        min-width: 0;
         width: 100%;
       }
+
+      .search_input {
+        min-width: 0;
+      }
+
       *:last-child {
         margin-left: 0;
       }