From de1d1ad9618aa0bc856734da959171ed1ecc6865 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Fri, 24 Feb 2023 21:50:21 +0530
Subject: [PATCH] Shrink the preview tools buttons to icons-only on a small
 screen

---
 ui/index.html         | 8 ++++----
 ui/media/css/main.css | 6 ++++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index b0277517..4d970dd9 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -286,13 +286,13 @@
 
             <div id="preview-content">
                 <div id="preview-tools">
-                    <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
-                    <button id="save-all-images" class="primaryButton"><i class="fa-solid fa-download"></i> Download All Images</button>
+                    <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can icon"></i> Clear All</button>
+                    <button id="save-all-images" class="primaryButton"><i class="fa-solid fa-download icon"></i> Download All Images</button>
                     <div class="dropdown display-settings">
                         <button class="dropbtn primaryButton">
-                            <i class="fa-solid fa-bars"></i>
+                            <i class="fa-solid fa-bars icon"></i>
                             Preview settings
-                            <i class="fa-solid fa-angle-down"></i>
+                            <i class="fa-solid fa-angle-down icon"></i>
                         </button>
                         <div class="dropdown-content">
                             <div class="auto-scroll dropdown-item">
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 0c34129f..2a8cc252 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -851,6 +851,12 @@ input::file-selector-button {
     .simple-tooltip {
         display: none;
     }
+    #preview-tools button {
+        font-size: 0px;
+    }
+    #preview-tools button .icon {
+        font-size: 12pt;
+    }
 }
 
 @media screen and (max-width: 500px) {