Web: fix mobile overflow on activities, activity form, assets panel, routines, team/audit/API settings

Co-authored-by: Cursor <cursoragent@cursor.com>

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 {

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;

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;
   }
 

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;

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 {

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 {

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;

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);
 }
 

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>