improve metrics for small screens

kubero-dev · May 16, 2024 · 90fb984 · 90fb984
1 parent 77ee673
commit 90fb984
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/client/src/components/apps/alerts.vue b/client/src/components/apps/alerts.vue
@@ -1,14 +1,13 @@
 <template>
     <div>
-
         <v-alert 
             v-for="rule in rules" :key="rule.name"
             :text="rule.alert?.annotations.description"
             :title="rule.name"
             :type="rule.alerting ? 'error' : 'success'"
             variant="tonal"
             density="compact"
-            style="transform: scale(0.7); transform-origin: left; margin-bottom: -8px;"
+            style="transform: scale(0.7); transform-origin: left; margin-bottom: -8px; min-width: 400px;"
         ></v-alert>
     </div>
 </template>

diff --git a/client/src/components/apps/metrics.vue b/client/src/components/apps/metrics.vue
@@ -24,18 +24,18 @@
       </div>
       <div v-if="kubero.metricsEnabled">
         <v-row class="justify-space-between mb-2">
-            <v-col cols="8" sm="8" md="8" lg="8" xl="8">
+            <v-col cols="12" sm="12" md="8">
               <Alerts :app="app" :phase="phase" :pipeline="pipeline"/>
             </v-col>
-            <v-col>
+            <v-col cols="12" sm="12" md="2">
               <v-select
                 label="Select"
                 v-model="scale"
                 :items="[ '2h', '24h', '7d' ]"
                 density="compact"
               ></v-select>
             </v-col>
-            <v-col>
+            <v-col cols="12" sm="12" md="2">
                 <v-btn
                     block
                     @click="refreshMetrics()"