From 9d3786b51993927c6c9f657464fa7e8f227b2ffd Mon Sep 17 00:00:00 2001
From: Ivan Velichko <iximiuz@gmail.com>
Date: Thu, 12 Oct 2023 10:31:47 +0000
Subject: [PATCH] remove vertical scroll on narrow screens

---
 ui/src/components/GraphScreenBottomBar.vue | 30 ++++++++++++----------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/GraphScreenBottomBar.vue b/ui/src/components/GraphScreenBottomBar.vue
index 0e50dc3..2599256 100644
--- a/ui/src/components/GraphScreenBottomBar.vue
+++ b/ui/src/components/GraphScreenBottomBar.vue
@@ -9,12 +9,12 @@ defineProps({
 
 <template>
   <div class="bg-base-200 border-neutral-content border-t flex gap-x-2 h-[1.6rem] items-center shrink-0">
-    <span class="flex font-semibold h-full invisible items-center mr-32 px-6">
+    <span class="flex font-semibold h-full invisible items-center md:mr-32 mr-10 px-6">
       Kubernetes Explorer
     </span>
 
     <div
-      class="broder-box flex h-full hover:bg-base-300 hover:tooltip-open tooltip tooltip-top z-50"
+      class="flex h-full hover:bg-base-300 hover:tooltip-open tooltip tooltip-top z-50"
       data-tip="Open web terminal"
     >
       <button
@@ -29,7 +29,7 @@ defineProps({
     </div>
 
     <div
-      class="broder-box flex h-full hover:bg-base-300 hover:tooltip-open tooltip tooltip-top z-50"
+      class="flex h-full hover:bg-base-300 hover:tooltip-open tooltip tooltip-top z-50"
       data-tip="Watch cluster events - Coming soon!"
     >
       <button
@@ -43,21 +43,23 @@ defineProps({
     </div>
 
     <div
-      class="broder-box flex h-full hover:bg-base-300 z-50"
+      class="flex h-full hover:bg-base-300 z-50"
     >
       <div class="dropdown dropdown-hover dropdown-top">
-        <label
-          tabindex="0"
-          class="btn btn-ghost btn-xs flex-nowrap gap-1 hover:opacity-100 hover:shadow-none normal-case opacity-70 rounded-none shrink-0"
-        >
-          <div class="bg-[rgb(21,128,61)] border border-black h-4 rounded-sm w-4" />
-          <div class="bg-[rgb(36,158,235)] border border-black h-4 rounded-sm w-4" />
-          <div class="bg-[rgb(245,158,11)] border border-black h-4 rounded-sm w-4" />
-          <div class="bg-[rgb(239,68,68)] border border-black h-4 rounded-sm w-4" />
-        </label>
+        <div class="flex items-center max-h-[21px] overflow-hidden">
+          <label
+            tabindex="0"
+            class="btn btn-ghost btn-xs flex-nowrap gap-x-1 hover:opacity-100 hover:shadow-none min-h-0 normal-case opacity-70 rounded-none"
+          >
+            <div class="bg-[rgb(21,128,61)] border border-black h-4 rounded-sm w-4" />
+            <div class="bg-[rgb(36,158,235)] border border-black h-4 rounded-sm w-4" />
+            <div class="bg-[rgb(245,158,11)] border border-black h-4 rounded-sm w-4" />
+            <div class="bg-[rgb(239,68,68)] border border-black h-4 rounded-sm w-4" />
+          </label>
+        </div>
         <ul
           tabindex="0"
-          class="-left-[18rem] bg-base-200 border border-neutral-content dropdown-content flex flex-col gap-y-1 md:-left-[15rem] px-4 py-3 rounded-md shadow-lg w-[25rem] z-[50]"
+          class="-left-[15rem] bg-base-200 border border-neutral-content dropdown-content flex flex-col gap-y-1 px-4 py-3 rounded-md shadow-lg w-[25rem] z-[50]"
         >
           <h2 class="font-semibold mb-3 text-base">
             Color coding of graph objects