From fa3fe0d36480c9d6f9fd68dc982e0f5fe46d37ea Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sat, 10 Oct 2026 11:58:45 +0330
Subject: [PATCH] Web: fix mobile overflow on activities, activity form, assets
 panel, routines, team/audit/API settings

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/person-assets/PersonAssetsPanel.vue    |  1 +
 apps/web/src/components/ui/UiSegmented.vue            |  8 ++++++++
 apps/web/src/views/ActivitiesView.vue                 | 11 +++++------
 apps/web/src/views/ActivityFormView.vue               |  4 +++-
 apps/web/src/views/AuditLogsView.vue                  |  1 +
 apps/web/src/views/PublicApiSettingsView.vue          |  1 +
 apps/web/src/views/TeamSettingsView.vue               |  2 ++
 .../src/views/routines/RoutinesMyPerformanceView.vue  |  1 +
 apps/web/src/views/routines/RoutinesShellView.vue     |  4 ++--
 9 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/person-assets/PersonAssetsPanel.vue b/apps/web/src/components/person-assets/PersonAssetsPanel.vue
index 619f4cc..747c4a8 100644
--- a/apps/web/src/components/person-assets/PersonAssetsPanel.vue
+++ b/apps/web/src/components/person-assets/PersonAssetsPanel.vue
@@ -960,6 +960,7 @@ onMounted(async () => {
 <style scoped>
 .assets {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 0.9rem;
 }
 .card {
diff --git a/apps/web/src/components/ui/UiSegmented.vue b/apps/web/src/components/ui/UiSegmented.vue
index 2d7d987..5df8fde 100644
--- a/apps/web/src/components/ui/UiSegmented.vue
+++ b/apps/web/src/components/ui/UiSegmented.vue
@@ -32,9 +32,17 @@ const model = defineModel<T>({ required: true });
   gap: 2px;
   background: #e8eef1;
   border-radius: var(--radius);
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ui-seg::-webkit-scrollbar {
+  display: none;
 }
 
 .seg {
+  flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/apps/web/src/views/ActivitiesView.vue b/apps/web/src/views/ActivitiesView.vue
index 76ccd45..51751f6 100644
--- a/apps/web/src/views/ActivitiesView.vue
+++ b/apps/web/src/views/ActivitiesView.vue
@@ -1176,6 +1176,7 @@ onUnmounted(() => {
 <style scoped>
 .page {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 1rem;
   min-width: 0;
 }
@@ -1233,10 +1234,7 @@ h1 {
   font-weight: 600;
 }
 
-.head-actions .excel-btn .btn-full {
-  display: inline;
-}
-.head-actions .excel-btn .btn-short {
+.btn-short {
   display: none;
 }
 
@@ -1326,6 +1324,7 @@ h1 {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-wrap: wrap;
   margin-inline-start: auto;
 }
 
@@ -1992,10 +1991,10 @@ time.note {
     flex: 1;
   }
 
-  .head-actions .excel-btn .btn-full {
+  .btn-full {
     display: none;
   }
-  .head-actions .excel-btn .btn-short {
+  .btn-short {
     display: inline;
   }
 
diff --git a/apps/web/src/views/ActivityFormView.vue b/apps/web/src/views/ActivityFormView.vue
index 61a5543..68b188c 100644
--- a/apps/web/src/views/ActivityFormView.vue
+++ b/apps/web/src/views/ActivityFormView.vue
@@ -1052,6 +1052,7 @@ watch([id, isNew], () => void load(), { immediate: true });
 
 .layout {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--sp-3);
 }
 
@@ -1062,6 +1063,7 @@ watch([id, isNew], () => void load(), { immediate: true });
 .form,
 .stack {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--sp-3);
 }
 
@@ -1563,7 +1565,7 @@ watch([id, isNew], () => void load(), { immediate: true });
 .priorities {
   display: flex;
   flex-direction: row;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.45rem;
diff --git a/apps/web/src/views/AuditLogsView.vue b/apps/web/src/views/AuditLogsView.vue
index 1c11934..aadad50 100644
--- a/apps/web/src/views/AuditLogsView.vue
+++ b/apps/web/src/views/AuditLogsView.vue
@@ -171,6 +171,7 @@ onMounted(() => {
 <style scoped>
 .audit-page {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 1rem;
 }
 .filters-grid {
diff --git a/apps/web/src/views/PublicApiSettingsView.vue b/apps/web/src/views/PublicApiSettingsView.vue
index e00ca2e..05319a5 100644
--- a/apps/web/src/views/PublicApiSettingsView.vue
+++ b/apps/web/src/views/PublicApiSettingsView.vue
@@ -335,6 +335,7 @@ onMounted(() => {
 <style scoped>
 .page {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 1rem;
 }
 .hint {
diff --git a/apps/web/src/views/TeamSettingsView.vue b/apps/web/src/views/TeamSettingsView.vue
index ae29e99..abdc8f8 100644
--- a/apps/web/src/views/TeamSettingsView.vue
+++ b/apps/web/src/views/TeamSettingsView.vue
@@ -1306,10 +1306,12 @@ h1 {
   min-height: 42px;
   padding: 0 0.85rem;
   color: #94a3b8;
+  min-width: 0;
 }
 
 .search input {
   flex: 1;
+  width: 100%;
   border: 0;
   outline: none;
   font: inherit;
diff --git a/apps/web/src/views/routines/RoutinesMyPerformanceView.vue b/apps/web/src/views/routines/RoutinesMyPerformanceView.vue
index 0ebc714..de4b391 100644
--- a/apps/web/src/views/routines/RoutinesMyPerformanceView.vue
+++ b/apps/web/src/views/routines/RoutinesMyPerformanceView.vue
@@ -165,6 +165,7 @@ const catOpt = computed(() => categoryBar(d.value?.byCategory ?? []));
 <style scoped>
 .perf {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--sp-4);
 }
 
diff --git a/apps/web/src/views/routines/RoutinesShellView.vue b/apps/web/src/views/routines/RoutinesShellView.vue
index d656413..d0b5b0c 100644
--- a/apps/web/src/views/routines/RoutinesShellView.vue
+++ b/apps/web/src/views/routines/RoutinesShellView.vue
@@ -224,8 +224,8 @@ const hideHeader = computed(() => route.name === 'routine-new' || route.name ===
 @media (max-width: 900px) {
   .r-tabs {
     gap: var(--sp-4);
-    margin-inline: calc(-1 * var(--sp-4));
-    padding-inline: var(--sp-4);
+    margin-inline: calc(-1 * var(--sp-3));
+    padding-inline: var(--sp-3);
   }
 }
 </style>