From 85424da98eed1a8c49d39e7d51d57583d607e40b Mon Sep 17 00:00:00 2001
From: Artem Chernyshev <artem.chernyshev@talos-systems.com>
Date: Fri, 21 Jun 2024 14:36:33 +0300
Subject: [PATCH] fix: do better handling of small screens

Fix the bug with the icons displayed smaller than their width and
height values.
Adjust style of the header a bit: colors, transitions and small screen
display.

Signed-off-by: Artem Chernyshev <artem.chernyshev@talos-systems.com>
---
 frontend/src/components/THeader/THeader.vue          | 12 ++++++------
 frontend/src/components/common/Button/TButton.vue    |  2 +-
 frontend/src/components/common/Icon/TIcon.vue        |  2 +-
 .../components/common/OngoingTasks/OngoingTasks.vue  |  2 +-
 .../views/cluster/ClusterMachines/ClusterMachine.vue |  2 +-
 .../src/views/cluster/ClusterMachines/MachineSet.vue |  2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/THeader/THeader.vue b/frontend/src/components/THeader/THeader.vue
index a8f4128f..a6eab34e 100644
--- a/frontend/src/components/THeader/THeader.vue
+++ b/frontend/src/components/THeader/THeader.vue
@@ -9,19 +9,19 @@ included in the LICENSE file.
     <div class="t-header-nav-wrapper">
       <div class="t-header-logo-wrapper">
         <router-link to="/" class="flex items-center gap-1 text-lg text-naturals-N13 uppercase">
-          <t-icon class="t-header-icon w-7 h-7" icon="logo" />
+          <t-icon class="t-header-icon w-7 h-7" icon="logo"/>
           <span class="font-bold">Sidero</span>
           <span>Omni</span>
         </router-link>
       </div>
       <div class="t-header-nav">
-        <a href="https://omni.siderolabs.com/docs/" target="_blank" class="flex hover:text-naturals-N14">
+        <a href="https://omni.siderolabs.com/docs/" target="_blank" class="flex hover:text-naturals-N14 transition-colors">
           <t-icon class="t-header-nav-icon" icon="info" />
-          <span class="t-header-nav-name">Documentation</span>
+          <span class="t-header-nav-name max-sm:hidden">Documentation</span>
         </a>
-        <a href="https://github.com/siderolabs/omni/issues" target="_blank" class="flex hover:text-naturals-N14">
+        <a href="https://github.com/siderolabs/omni/issues" target="_blank" class="flex hover:text-naturals-N14 transition-colors">
           <t-icon class="t-header-nav-icon" icon="check-in-circle" />
-          <span class="t-header-nav-name">Report an issue</span>
+          <span class="t-header-nav-name max-sm:hidden">Report an issue</span>
         </a>
         <ongoing-tasks/>
       </div>
@@ -57,6 +57,6 @@ import OngoingTasks from "@/components/common/OngoingTasks/OngoingTasks.vue";
 }
 
 .t-header-nav-name {
-  @apply text-xs;
+  @apply text-xs truncate;
 }
 </style>
diff --git a/frontend/src/components/common/Button/TButton.vue b/frontend/src/components/common/Button/TButton.vue
index f6889335..300d2039 100644
--- a/frontend/src/components/common/Button/TButton.vue
+++ b/frontend/src/components/common/Button/TButton.vue
@@ -16,7 +16,7 @@ included in the LICENSE file.
     }"
   >
     <span class="t-button-text whitespace-nowrap" v-if="$slots.default" :style="textOrder" :class="{ 'text-red-R1': danger }">
-      <slot />
+      <slot/>
     </span>
     <t-icon :icon="icon" v-if="icon" class="button-icon" :class="{ 'text-red-R1': danger }"/>
   </button>
diff --git a/frontend/src/components/common/Icon/TIcon.vue b/frontend/src/components/common/Icon/TIcon.vue
index 5a1151f1..64731093 100644
--- a/frontend/src/components/common/Icon/TIcon.vue
+++ b/frontend/src/components/common/Icon/TIcon.vue
@@ -6,7 +6,7 @@ included in the LICENSE file.
 -->
 <template>
   <img v-if="svgBase64" alt="" :src="`data:image/svg+xml;base64,${svgBase64}`"/>
-  <component v-else :is="component"/>
+  <component v-else :is="component" class="min-w-max"/>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/components/common/OngoingTasks/OngoingTasks.vue b/frontend/src/components/common/OngoingTasks/OngoingTasks.vue
index ee27101d..81a21a05 100644
--- a/frontend/src/components/common/OngoingTasks/OngoingTasks.vue
+++ b/frontend/src/components/common/OngoingTasks/OngoingTasks.vue
@@ -111,7 +111,7 @@ const onClickOutside = () => {
 
 <style scoped>
 .dropdown {
-  @apply flex items-center cursor-pointer gap-1 text-naturals-N11 hover:text-naturals-N13;
+  @apply flex items-center cursor-pointer gap-1 text-naturals-N11 hover:text-naturals-N14 transition-colors;
 }
 .dropdown-wrapper {
   @apply relative flex items-center;
diff --git a/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue b/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue
index a1754235..235c7f95 100644
--- a/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue
+++ b/frontend/src/views/cluster/ClusterMachines/ClusterMachine.vue
@@ -10,7 +10,7 @@ included in the LICENSE file.
     <div class="flex-1 grid grid-cols-4 -mr-3 items-center" @click="openNodeInfo">
       <div class="col-span-2 flex items-center gap-2">
         <t-icon icon="server" class="w-4 h-4 ml-2"/>
-        <router-link :to="{ name: 'NodeOverview', params: { cluster: clusterName, machine: machine.metadata.id }}" class="list-item-link">
+        <router-link :to="{ name: 'NodeOverview', params: { cluster: clusterName, machine: machine.metadata.id }}" class="list-item-link truncate">
           {{ nodeName }}
         </router-link>
       </div>
diff --git a/frontend/src/views/cluster/ClusterMachines/MachineSet.vue b/frontend/src/views/cluster/ClusterMachines/MachineSet.vue
index 9ea1e517..920fc0fa 100644
--- a/frontend/src/views/cluster/ClusterMachines/MachineSet.vue
+++ b/frontend/src/views/cluster/ClusterMachines/MachineSet.vue
@@ -15,7 +15,7 @@ included in the LICENSE file.
               {{ machineSetTitle(clusterID, machineSet?.metadata?.id) }}
             </div>
           </div>
-          <div class="flex-1 flex ml-10">
+          <div class="flex-1 flex max-md:ml-1 md:ml-10">
             <t-spinner class="w-4 h-4" v-if="scaling"/>
             <div class="flex items-center gap-1" v-else-if="!editingMachinesCount">
               {{ machineSet?.spec?.machines?.healthy || 0 }}/{{ machineSet?.spec?.machines?.requested || 0 }}