fix(ui): prevent horizontal overflow on mobile for login, history and templates

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

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;

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>
 
@@ -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>

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