[visual-editor] Restyle tab overflow menu (#4042)

breadboard-ai · Dec 17, 2024 · 7aa768a · 7aa768a
1 parent fdc9731
commit 7aa768a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/packages/visual-editor/src/index.styles.ts b/packages/visual-editor/src/index.styles.ts
@@ -234,7 +234,7 @@ export const styles = css`
     border-radius: var(--bb-grid-size-2) var(--bb-grid-size-2) 0 0;
     padding: var(--bb-grid-size);
     display: grid;
-    grid-template-columns: 32px 1fr 32px;
+    grid-template-columns: 1fr 24px 32px;
     align-items: center;
     justify-items: center;
     user-select: none;
@@ -251,11 +251,18 @@ export const styles = css`
   }
 
   #tab-container .tab-overflow {
-    width: 20px;
-    height: 20px;
-    background: var(--bb-icon-menu) center center / 20px 20px no-repeat;
+    width: 24px;
+    height: 24px;
+    background: var(--bb-neutral-0) var(--bb-icon-more-vert) center center /
+      20px 20px no-repeat;
     font-size: 0;
     border: none;
+    border-radius: 50%;
+  }
+
+  #tab-container .tab-overflow:hover,
+  #tab-container .tab-overflow:focus {
+    background-color: var(--bb-neutral-200);
   }
 
   #tab-container .tab:hover {
@@ -316,7 +323,7 @@ export const styles = css`
     align-items: flex-start;
     justify-content: center;
     column-gap: var(--bb-grid-size);
-    padding: 0 var(--bb-grid-size-4) 0 var(--bb-grid-size);
+    padding: 0 var(--bb-grid-size-3) 0 var(--bb-grid-size-3);
     margin: 0;
     cursor: pointer;
     background: transparent;

diff --git a/packages/visual-editor/src/index.ts b/packages/visual-editor/src/index.ts
@@ -2963,27 +2963,6 @@ export class Main extends LitElement {
                   active: this.tab?.id === tab.id,
                 })}
               >
-                <button
-                  class="tab-overflow"
-                  @click=${(evt: PointerEvent) => {
-                    if (!(evt.target instanceof HTMLButtonElement)) {
-                      return;
-                    }
-
-                    const btnBounds = evt.target.getBoundingClientRect();
-                    const x = btnBounds.x + btnBounds.width;
-                    const y = btnBounds.y + btnBounds.height;
-
-                    this.#boardOverflowMenuConfiguration = {
-                      tabId: tab.id,
-                      x,
-                      y,
-                    };
-                    this.showBoardOverflowMenu = true;
-                  }}
-                >
-                  Overflow
-                </button>
                 <button
                   class=${classMap({
                     "back-to-main-board": true,
@@ -3024,6 +3003,29 @@ export class Main extends LitElement {
                     ></span
                   >
                 </button>
+
+                <button
+                  class="tab-overflow"
+                  @click=${(evt: PointerEvent) => {
+                    if (!(evt.target instanceof HTMLButtonElement)) {
+                      return;
+                    }
+
+                    const btnBounds = evt.target.getBoundingClientRect();
+                    const x = btnBounds.x + btnBounds.width;
+                    const y = btnBounds.y + btnBounds.height;
+
+                    this.#boardOverflowMenuConfiguration = {
+                      tabId: tab.id,
+                      x,
+                      y,
+                    };
+                    this.showBoardOverflowMenu = true;
+                  }}
+                >
+                  Overflow
+                </button>
+
                 <button
                   @click=${() => {
                     this.#runtime.board.closeTab(id);