From 0c2ea77b20cfdc1e5629e0daf4b16d4941459c45 Mon Sep 17 00:00:00 2001
From: Mczubi <dominikzublasing@gmail.com>
Date: Wed, 7 Oct 2026 18:58:54 +0000
Subject: [PATCH 1/2] fix(ui): prevent horizontal overflow on mobile for login,
 history and templates

- data tables in mobile (stacked) mode: allow values to wrap, lay rows out
  as blocks so long unbreakable values no longer widen the table, and keep
  row padding consistent (global App.vue styles)
- history: let mobile rows grow instead of the fixed 60px row height
- login: card follows the viewport width with a small margin on phones
- template view: icon-only Stop/Run buttons and name-only title on xs so
  the toolbar actions stay on screen
---
 web/src/App.vue                        | 36 ++++++++++++++++++++++++
 web/src/views/Auth.vue                 | 22 +++++++++++++--
 web/src/views/project/History.vue      |  9 +++++-
 web/src/views/project/TemplateView.vue | 38 +++++++++++++++++++++-----
 4 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 92d0a41532..509689d0f2 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -845,6 +845,42 @@ html.WorkflowEditor-html body {
     & > td {
       white-space: nowrap;
     }
+
+    // Mobile (stacked) rows: long values must wrap instead of pushing the
+    // value column past the viewport edge.
+    & > td.v-data-table__mobile-row {
+      white-space: normal;
+      padding-left: 16px !important;
+      padding-right: 16px !important;
+    }
+  }
+
+  // Stacked (mobile) rows are not a real grid. In table layout, unbreakable
+  // values (paths, URLs) set the table's min width and push the values past
+  // the viewport, so lay the rows out as blocks that follow the page width.
+  &.v-data-table--mobile > .v-data-table__wrapper > table {
+    display: block;
+
+    & > thead,
+    & > tbody,
+    & > tbody > tr,
+    & > thead > tr {
+      display: block;
+    }
+
+    & > colgroup {
+      display: none;
+    }
+  }
+
+  .v-data-table__mobile-row__header {
+    flex-shrink: 0;
+    padding-right: 12px;
+  }
+
+  .v-data-table__mobile-row__cell {
+    min-width: 0;
+    overflow-wrap: break-word;
   }
 }
 
diff --git a/web/src/views/Auth.vue b/web/src/views/Auth.vue
index 8495144423..c2fd970be5 100644
--- a/web/src/views/Auth.vue
+++ b/web/src/views/Auth.vue
@@ -47,14 +47,14 @@
     </v-dialog>
 
     <v-container fluid fill-height align-center justify-center class="pa-0">
-      <v-card class="px-5 py-5" style="border-radius: 15px">
+      <v-card class="px-5 py-5 auth__card" style="border-radius: 15px">
         <v-card-text>
           <v-form
             @submit.prevent
             ref="signInForm"
             lazy-validation
             v-model="signInFormValid"
-            style="width: 350px"
+            class="auth__form"
           >
             <v-img
               width="80"
@@ -266,6 +266,8 @@
   </div>
 </template>
 <style lang="scss">
+@import '~vuetify/src/styles/settings/_variables';
+
 .auth__divider {
   margin-top: 15px;
   margin-bottom: 5px;
@@ -287,6 +289,22 @@
     margin-left: 10px;
   }
 }
+.auth__card {
+  width: calc(100% - 24px);
+  max-width: 422px;
+}
+
+.auth__form {
+  width: 100%;
+  max-width: 350px;
+}
+
+@media #{map-get($display-breakpoints, 'xs-only')} {
+  .auth__card.v-card {
+    padding: 8px !important;
+  }
+}
+
 .auth {
   height: 100dvh;
   background: #80808024;
diff --git a/web/src/views/project/History.vue b/web/src/views/project/History.vue
index e9760f13b6..1e8fa83f93 100644
--- a/web/src/views/project/History.vue
+++ b/web/src/views/project/History.vue
@@ -103,9 +103,16 @@
 </template>
 
 <style lang="scss">
-.HistoryTable td {
+.HistoryTable td:not(.v-data-table__mobile-row) {
   height: 60px !important;
 }
+
+.HistoryTable td.v-data-table__mobile-row {
+  height: auto !important;
+  min-height: 48px;
+  padding-top: 6px !important;
+  padding-bottom: 6px !important;
+}
 </style>
 
 <script>
diff --git a/web/src/views/project/TemplateView.vue b/web/src/views/project/TemplateView.vue
index 3f377fdce5..d953be1ac6 100644
--- a/web/src/views/project/TemplateView.vue
+++ b/web/src/views/project/TemplateView.vue
@@ -60,9 +60,9 @@
 
     <v-toolbar flat>
       <v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
-      <v-toolbar-title class="breadcrumbs">
+      <v-toolbar-title class="breadcrumbs TemplateView__title">
         <router-link
-          class="breadcrumbs__item breadcrumbs__item--link"
+          class="breadcrumbs__item breadcrumbs__item--link TemplateView__parent-link"
           :to="
             viewId
               ? `/project/${projectId}/views/${viewId}/templates/`
@@ -71,7 +71,7 @@
         >
           {{ $t('taskTemplates2') }}
         </router-link>
-        <v-icon>mdi-chevron-right</v-icon>
+        <v-icon class="TemplateView__parent-link">mdi-chevron-right</v-icon>
         <span class="breadcrumbs__item">{{ item.name }}</span>
       </v-toolbar-title>
 
@@ -83,10 +83,12 @@
             v-bind="attrs"
             v-on="on"
             color="grey"
-            class="mr-3 pr-2"
+            class="mr-3 pr-2 TemplateView__toolbar-btn"
             :disabled="stopAllTasksProgress"
+            :aria-label="$t('stopAll')"
           >
-            {{ $t('stopAll') }}
+            <v-icon v-if="$vuetify.breakpoint.xsOnly">mdi-stop</v-icon>
+            <template v-else>{{ $t('stopAll') }}</template>
             <v-icon>mdi-chevron-down</v-icon>
           </v-btn>
         </template>
@@ -110,11 +112,13 @@
         v-if="canRun"
         color="primary"
         depressed
-        class="mr-3"
+        class="mr-3 TemplateView__toolbar-btn"
         @click="newTaskDialog = true"
         data-testid="template-run"
+        :aria-label="$t(TEMPLATE_TYPE_ACTION_TITLES[item.type])"
       >
-        {{ $t(TEMPLATE_TYPE_ACTION_TITLES[item.type]) }}
+        <v-icon v-if="$vuetify.breakpoint.xsOnly">mdi-play</v-icon>
+        <template v-else>{{ $t(TEMPLATE_TYPE_ACTION_TITLES[item.type]) }}</template>
       </v-btn>
 
       <v-btn icon color="error" @click="askDelete()" v-if="canUpdate">
@@ -190,6 +194,26 @@
   margin-bottom: 12px;
 }
 
+@media #{map-get($display-breakpoints, 'xs-only')} {
+  // Keep the toolbar buttons inside the viewport: show only the template
+  // name (ellipsized) and tighten the button spacing.
+  .TemplateView__parent-link {
+    display: none !important;
+  }
+
+  .TemplateView__title {
+    min-width: 0;
+    flex: 1 1 0;
+  }
+
+  .TemplateView__toolbar-btn.v-btn {
+    margin-right: 4px !important;
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+    min-width: 0 !important;
+  }
+}
+
 @media #{map-get($display-breakpoints, 'md-and-up')} {
   .TemplateView__description {
     transform: translateY(-12px);

From e0dfafa0089d99d4243353009dbc80fba1045582 Mon Sep 17 00:00:00 2001
From: Claude <claude@zub-net.org>
Date: Wed, 7 Oct 2026 22:34:12 +0200
Subject: [PATCH 2/2] fix(ui): wrap unbroken names in mobile table rows

---
 web/src/App.vue                   | 2 +-
 web/src/views/project/History.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 509689d0f2..649040886d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -880,7 +880,7 @@ html.WorkflowEditor-html body {
 
   .v-data-table__mobile-row__cell {
     min-width: 0;
-    overflow-wrap: break-word;
+    overflow-wrap: anywhere;
   }
 }
 
diff --git a/web/src/views/project/History.vue b/web/src/views/project/History.vue
index 1e8fa83f93..2db2e4b53e 100644
--- a/web/src/views/project/History.vue
+++ b/web/src/views/project/History.vue
@@ -31,7 +31,7 @@
           <!--            {{ TEMPLATE_TYPE_ICONS[item.tpl_type] }}-->
           <!--          </v-icon>-->
 
-          <TaskLink :label="'#' + item.id" :task-id="item.id"/>
+          <TaskLink class="flex-shrink-0" :label="'#' + item.id" :task-id="item.id"/>
 
           <v-icon small class="ml-1 mr-1">mdi-arrow-left</v-icon>