style: move border and shadow style to outer container to fix topbar badges shadow/border (#7044)

## Summary Moves the shadow and border from workflow tabs to outer container so that there is no longer an inconsistency with the badges and topbar bottom border and shadows. ## Changes | Before | After | | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | <img width="1522" height="598" alt="Selection_2473" src="https://github.com/user-attachments/assets/92aa602c-a018-4b3d-8606-9c00552ffc20" /> | <img width="1522" height="598" alt="Selection_2472" src="https://github.com/user-attachments/assets/13c75da3-a938-442a-9bf6-9c30d822a610" /> | | <img width="1522" height="598" alt="Selection_2474" src="https://github.com/user-attachments/assets/e84efd2a-6ae1-44a6-9901-0f902e942b64" /> | <img width="1522" height="598" alt="Selection_2475" src="https://github.com/user-attachments/assets/66d4852e-eed7-49f9-8f0f-9e8bbcdcb0b8" /> | ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7044-style-move-border-and-shadow-style-to-outer-container-to-fix-topbar-badges-shadow-border-2ba6d73d365081b991a3f981db87f434) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
2026-01-26 19:09:52 +00:00 · 2025-11-29 16:52:03 -08:00
parent d8795ec997
commit f61bfe666e
7 changed files with 4 additions and 2 deletions
--- a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -14,7 +14,9 @@
          v-if="isNativeWindow() && workflowTabsPosition !== 'Topbar'"
          class="app-drag fixed top-0 left-0 z-10 h-[var(--comfy-topbar-height)] w-full"
        />
-        <div class="flex h-full items-center">
+        <div
+          class="flex h-full items-center border-b border-interface-stroke bg-comfy-menu-bg shadow-interface"
+        >
          <WorkflowTabs />
          <TopbarBadges />
        </div>
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    ref="containerRef"
-    class="workflow-tabs-container flex h-full max-w-full flex-auto flex-row overflow-hidden border-b border-[var(--interface-stroke)] shadow-interface"
+    class="workflow-tabs-container flex h-full max-w-full flex-auto flex-row overflow-hidden"
    :class="{ 'workflow-tabs-container-desktop': isDesktop }"
  >
    <Button