[visual-editor] Fix tab rendering (#3861)

#3836
breadboard-ai · Dec 3, 2024 · a7c34b4 · a7c34b4
1 parent 6d4f6a2
commit a7c34b4
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 40 deletions.
diff --git a/.changeset/poor-oranges-prove.md b/.changeset/poor-oranges-prove.md
@@ -0,0 +1,5 @@
+---
+"@breadboard-ai/visual-editor": patch
+---
+
+Fix tab rendering
diff --git a/packages/visual-editor/src/index.styles.ts b/packages/visual-editor/src/index.styles.ts
@@ -32,24 +32,23 @@ export const styles = css`
     display: none;
   }
 
-  #close-board {
+  .close-board {
     font-size: 0;
     width: 20px;
     height: 20px;
     background: var(--bb-icon-close) center center no-repeat;
     background-size: 16px 16px;
     border: 2px solid transparent;
-    margin-left: calc(var(--bb-grid-size) * 2);
     opacity: 0.6;
     transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
     border-radius: 50%;
   }
 
-  #close-board:not([disabled]) {
+  .close-board:not([disabled]) {
     cursor: pointer;
   }
 
-  #close-board:not([disabled]):hover {
+  .close-board:not([disabled]):hover {
     transition-duration: 0.1s;
     opacity: 1;
     background-color: var(--bb-neutral-300);
@@ -224,8 +223,9 @@ export const styles = css`
     margin: 0;
     height: calc(100% - var(--bb-grid-size) * 2);
     border-radius: var(--bb-grid-size) var(--bb-grid-size) 0 0;
-    padding: 0 calc(var(--bb-grid-size) * 4);
-    display: flex;
+    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr 32px;
     align-items: center;
     user-select: none;
     margin-right: var(--bb-grid-size-2);
@@ -285,17 +285,26 @@ export const styles = css`
   }
 
   #tab-container .back-to-main-board {
-    padding: 0;
+    display: grid;
+    grid-template-columns: 1fr 24px;
+    align-items: center;
+    column-gap: var(--bb-grid-size);
+    padding: 0 var(--bb-grid-size-4);
     margin: 0;
     cursor: pointer;
-    background: none;
+    background: transparent;
+    height: 100%;
     border: none;
     color: var(--bb-neutral-800);
     white-space: nowrap;
     font: 400 var(--bb-label-medium) / var(--bb-label-line-height-medium)
       var(--bb-font-family);
   }
 
+  #tab-container .back-to-main-board:not(.can-save) {
+    grid-template-columns: 1fr;
+  }
+
   #tab-container .back-to-main-board:disabled {
     cursor: auto;
     color: var(--bb-neutral-800);

diff --git a/packages/visual-editor/src/index.ts b/packages/visual-editor/src/index.ts
@@ -2571,46 +2571,45 @@ export class Main extends LitElement {
                   active: this.tab?.id === tab.id,
                 })}
               >
-                <span
-                  ><button
-                    class=${classMap({
-                      "back-to-main-board": true,
-                    })}
-                    @click=${() => {
-                      if (this.tab?.id === tab.id && tab.subGraphId !== null) {
-                        tab.subGraphId = null;
-                        return;
-                      }
-
-                      this.#runtime.board.changeTab(tab.id);
-                    }}
-                    @dblclick=${(evt: PointerEvent) => {
-                      if (!this.tab) {
-                        return;
-                      }
-
-                      this.#showBoardEditOverlay(evt.clientX, evt.clientY);
-                    }}
-                  >
-                    ${tab.graph.title}
-                  </button></span
-                >
-                <div
+                <button
                   class=${classMap({
-                    "save-status": true,
+                    "back-to-main-board": true,
                     "can-save": canSave,
-                    remote,
-                    [saveStatus]: true,
-                    readonly,
                   })}
-                  title=${saveTitle}
-                ></div>
+                  @click=${() => {
+                    if (this.tab?.id === tab.id && tab.subGraphId !== null) {
+                      tab.subGraphId = null;
+                      return;
+                    }
+
+                    this.#runtime.board.changeTab(tab.id);
+                  }}
+                  @dblclick=${(evt: PointerEvent) => {
+                    if (!this.tab) {
+                      return;
+                    }
+
+                    this.#showBoardEditOverlay(evt.clientX, evt.clientY);
+                  }}
+                >
+                  <span>${tab.graph.title}</span>
+                  <span
+                    class=${classMap({
+                      "save-status": true,
+                      "can-save": canSave,
+                      remote,
+                      [saveStatus]: true,
+                      readonly,
+                    })}
+                    title=${saveTitle}
+                  ></span>
+                </button>
                 <button
                   @click=${() => {
                     this.#runtime.board.closeTab(id);
                   }}
                   ?disabled=${tab.graph === null}
-                  id="close-board"
+                  class="close-board"
                   title="Close Board"
                 >
                   Close