From 15c337914d86040d50864a37488f447cd233b2bc Mon Sep 17 00:00:00 2001
From: AlUlkesh <99896447+AlUlkesh@users.noreply.github.com>
Date: Tue, 22 Aug 2023 09:08:11 +0200
Subject: [PATCH] fix: refresh button is overlayed by other button

---
 scripts/image_browser.py |  9 +++++----
 style.css                | 16 ++++++++++------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/scripts/image_browser.py b/scripts/image_browser.py
index 4ecda58..31abf59 100644
--- a/scripts/image_browser.py
+++ b/scripts/image_browser.py
@@ -1137,16 +1137,17 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
             with gr.Row():    
                 with gr.Column(scale=2):    
                     with gr.Row(elem_id=f"{tab.base_tag}_image_browser_gallery_controls") as gallery_controls_panel:
-                        with gr.Column(scale=2, min_width=20):
+                        with gr.Column(scale=4, min_width=20):
                             first_page = gr.Button("First Page", elem_id=f"{tab.base_tag}_control_image_browser_first_page")
-                        with gr.Column(scale=2, min_width=20):
+                        with gr.Column(scale=4, min_width=20):
                             prev_page = gr.Button("Prev Page", elem_id=f"{tab.base_tag}_control_image_browser_prev_page")
                         with gr.Row(elem_classes="page-index-panel"):
                             page_index = gr.Number(value=1, label="Page Index", elem_id=f"{tab.base_tag}_control_image_browser_page_index")
+                        with gr.Column(scale=1, min_width=20, elem_classes="refresh-index-panel"):
                             refresh_index_button = ToolButton(value=refresh_symbol, elem_id=f"{tab.base_tag}_control_image_browser_refresh_index")
-                        with gr.Column(scale=2, min_width=20):
+                        with gr.Column(scale=4, min_width=20):
                             next_page = gr.Button("Next Page", elem_id=f"{tab.base_tag}_control_image_browser_next_page")
-                        with gr.Column(scale=2, min_width=20):
+                        with gr.Column(scale=4, min_width=20):
                             end_page = gr.Button("End Page", elem_id=f"{tab.base_tag}_control_image_browser_end_page") 
                     with gr.Row(visible=False) as ranking_panel:
                         with gr.Column(scale=1, min_width=20):
diff --git a/style.css b/style.css
index 7882511..17552ad 100644
--- a/style.css
+++ b/style.css
@@ -54,21 +54,21 @@ button[id$='_image_browser_del_img_btn'] {
 #tab_image_browser button[id$='_control_image_browser_prev_page'],
 #tab_image_browser button[id$='_control_image_browser_next_page'],
 #tab_image_browser button[id$='_control_image_browser_end_page'] {
-  cursor: pointer !important
+  cursor: pointer !important;
 }
 
 #tab_image_browser div[id$='_control_image_browser_page_index'],
 #tab_image_browser .right-column-panel {
-  margin-top: calc(var(--body-text-size) * var(--line-sm) * -1) !important
+  margin-top: calc(var(--body-text-size) * var(--line-sm) * -1) !important;
 }
 
 #tab_image_browser .sort-panel button {
   margin-top: calc(var(--body-text-size) * var(--line-sm));
-  align-self: center
+  align-self: center;
 }
 
 #tab_image_browser .ranking-filter-input input:disabled{
-  cursor: not-allowed
+  cursor: not-allowed;
 }
 
 #tab_image_browser .thumbnails .thumbnail-item:first-child{
@@ -85,10 +85,14 @@ button[id$='_image_browser_del_img_btn'] {
 }
 
 #tab_image_browser .page-index-panel > div > div {
-  min-width: auto
+  min-width: auto;
+}
+
+#tab_image_browser .refresh-index-panel > div {
+  margin-top: var(--spacing-sm);
 }
 
 #tab_image_browser .gradio-dropdown ul.options li.item {
   white-space: wrap;
-  word-break: break-all
+  word-break: break-all;
 }