From 7efd4be401e4be71bacb69e49b5eae9425f2eaa0 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sat, 12 Mar 2022 21:12:20 +0100
Subject: [PATCH] faxed db group close buttpm style

---
 packages/web/src/widgets/TabsPanel.svelte | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/widgets/TabsPanel.svelte b/packages/web/src/widgets/TabsPanel.svelte
index 17220e4bf..bf3345e15 100644
--- a/packages/web/src/widgets/TabsPanel.svelte
+++ b/packages/web/src/widgets/TabsPanel.svelte
@@ -387,15 +387,17 @@
             draggingDbGroupTarget = null;
           }}
         >
-          <FontIcon icon={getDbIcon(tabGroup.tabDbKey)} padRight />
-          {tabGroup.tabDbName}
+          <div class="db-name-inner">
+            <FontIcon icon={getDbIcon(tabGroup.tabDbKey)} />
+            {tabGroup.tabDbName}
+          </div>
 
-          <span
+          <div
             class="close-button-right tabCloseButton"
             on:click={e => closeMultipleTabs(tab => tabGroup.tabs.find(x => x.tabid == tab.tabid))}
           >
             <FontIcon icon="icon close" />
-          </span>
+          </div>
         </div>
         <div class="db-group">
           {#each tabGroup.tabs as tab}
@@ -505,7 +507,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+  }
+  .db-name-inner {
     justify-content: center;
+    flex-grow: 1;
   }
   /* .db-name:hover {
     background-color: var(--theme-bg-3);
@@ -541,7 +546,6 @@
     margin-left: 5px;
     margin-right: 5px;
     color: var(--theme-font-3);
-    float: right;
   }
 
   .close-button:hover {