You are viewing a plain text version of this content. The canonical link for it is here.

Posted to notifications@superset.apache.org by "LevisNgigi (via GitHub)" <gi...@apache.org> on 2025/11/04 12:31:46 UTC

[PR] fix: fix tabs overflow in dashboards [superset]

LevisNgigi opened a new pull request, #35984:
URL: https://github.com/apache/superset/pull/35984

   Fix tabs overflow in dashboards
   
   ### SUMMARY
   Previously, when a dashboard contained many tabs and the left filter bar was expanded, the header bar overflowed horizontally, hiding tabs on the right. Now, an ellipsis (“…”) button appears when there are more tabs than can fit in the viewport. Clicking it reveals the hidden tabs, and selecting one brings it into view while replacing another tab in the visible area.
   
   ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
   BEFORE:
   
   https://github.com/user-attachments/assets/78c393fc-1b7f-48f7-a848-56cd64f13c89
   
   AFTER:
   
   https://github.com/user-attachments/assets/95781460-4da4-4f2a-badc-1af7e8daada8
   
   
   
   ### TESTING INSTRUCTIONS
   1)Open a dashboard with many tabs.
   2)Expand the left-hand filter bar.
   3)Observe that the header content/tab tittles for non visible tabs are now displayed under the ellipsis button.
   
   
   ### ADDITIONAL INFORMATION
   <!--- Check any relevant boxes with "x" -->
   <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue -->
   - [ ] Has associated issue:
   - [ ] Required feature flags:
   - [ ] Changes UI
   - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351))
     - [ ] Migration is atomic, supports rollback & is backwards-compatible
     - [ ] Confirm DB migration upgrade and downgrade tested
     - [ ] Runtime estimates and downtime expectations provided
   - [ ] Introduces new feature or API
   - [ ] Removes existing feature or API
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.

github-actions[bot] commented on PR #35984:
URL: https://github.com/apache/superset/pull/35984#issuecomment-3494300309

   🎪 [Showtime](https://github.com/mistercrunch/superset-showtime) is building environment on [GHA](https://github.com/apache/superset/actions/runs/19121094847) for [e2edb3e](https://github.com/apache/superset/commit/e2edb3e)


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "EnxDev (via GitHub)" <gi...@apache.org>.

EnxDev commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2511055036


##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -614,7 +619,16 @@ const DashboardBuilder = () => {
             </ResizableSidebar>
           </>
         )}
-      <StyledHeader ref={headerRef}>
+      <StyledHeader
+        data-test="dashboard-header-wrapper"
+        ref={headerRef}
+        filterBarWidth={

Review Comment:
   What do you think about that? It should more optimized
   ```suggestion
   filterBarWidth={
     (showFilterBar && filterBarOrientation === FilterBarOrientation.Vertical && currentFilterBarWidth) || 0
   }
   
   ```



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "EnxDev (via GitHub)" <gi...@apache.org>.

EnxDev commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2518426832


##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -614,7 +619,16 @@ const DashboardBuilder = () => {
             </ResizableSidebar>
           </>
         )}
-      <StyledHeader ref={headerRef}>
+      <StyledHeader
+        data-test="dashboard-header-wrapper"
+        ref={headerRef}
+        filterBarWidth={
+          showFilterBar &&
+          filterBarOrientation === FilterBarOrientation.Vertical
+            ? currentFilterBarWidth
+            : 0
+        }

Review Comment:
   > Done
   
   I might be missing something, but I don’t see this modification in the code. 
   
   Could you please double-check?



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "alexandrusoare (via GitHub)" <gi...@apache.org>.

alexandrusoare commented on PR #35984:
URL: https://github.com/apache/superset/pull/35984#issuecomment-3522681330

   The code looks fine, the implementation looks nice. I and @msyavuz think that we should also have a horizontal scrollable bar for a better user experience. @kasiazjc What do you think about this?


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "LevisNgigi (via GitHub)" <gi...@apache.org>.

LevisNgigi commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2511744022


##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -566,6 +570,7 @@ const DashboardBuilder = () => {
       const filterBarWidth = dashboardFiltersOpen
         ? adjustedWidth
         : CLOSED_FILTER_BAR_WIDTH;
+      setCurrentFilterBarWidth(filterBarWidth);

Review Comment:
   That is actually better so I have made the change based on your suggestion.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "amaannawab923 (via GitHub)" <gi...@apache.org>.

amaannawab923 commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2511036055


##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -614,7 +619,16 @@ const DashboardBuilder = () => {
             </ResizableSidebar>
           </>
         )}
-      <StyledHeader ref={headerRef}>
+      <StyledHeader
+        data-test="dashboard-header-wrapper"
+        ref={headerRef}
+        filterBarWidth={
+          showFilterBar &&
+          filterBarOrientation === FilterBarOrientation.Vertical
+            ? currentFilterBarWidth
+            : 0
+        }

Review Comment:
   const filterBarWidth = useMemo(() => {
     if (showFilterBar && filterBarOrientation === FilterBarOrientation.Vertical) {
       return currentFilterBarWidth;
     }
     return 0;
   }, [showFilterBar, filterBarOrientation, currentFilterBarWidth]);
   
   Can we use variable like this outside and pass it here rather than putting ternary conditions here



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "EnxDev (via GitHub)" <gi...@apache.org>.

EnxDev commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2511055036


##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -614,7 +619,16 @@ const DashboardBuilder = () => {
             </ResizableSidebar>
           </>
         )}
-      <StyledHeader ref={headerRef}>
+      <StyledHeader
+        data-test="dashboard-header-wrapper"
+        ref={headerRef}
+        filterBarWidth={

Review Comment:
   What do you think about that? It should more optimized
   ```suggestion
   filterBarWidth={
     (showFilterBar && filterBarOrientation === FilterBarOrientation.Vertical && currentFilterBarWidth) || 0
   }
   
   ```



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "bito-code-review[bot] (via GitHub)" <gi...@apache.org>.

bito-code-review[bot] commented on PR #35984:
URL: https://github.com/apache/superset/pull/35984#issuecomment-3485755242

   AI Code Review is in progress (usually takes 3 to 15 minutes unless it's a very large PR).


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "msyavuz (via GitHub)" <gi...@apache.org>.

msyavuz merged PR #35984:
URL: https://github.com/apache/superset/pull/35984


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "yousoph (via GitHub)" <gi...@apache.org>.

yousoph commented on PR #35984:
URL: https://github.com/apache/superset/pull/35984#issuecomment-3529278623

   Oh I thought I saw it scrolling horizontally when I tested it on the showtime env? 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "LevisNgigi (via GitHub)" <gi...@apache.org>.

LevisNgigi commented on PR #35984:
URL: https://github.com/apache/superset/pull/35984#issuecomment-3504076823

   > looks good to me, can we get some tests for this?
   
   @EnxDev Thank you,I have added some tests


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "korbit-ai[bot] (via GitHub)" <gi...@apache.org>.

korbit-ai[bot] commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2491168329


##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -426,6 +426,9 @@ const DashboardBuilder = () => {
     isReport;
 
   const [barTopOffset, setBarTopOffset] = useState(0);
+  const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(
+    CLOSED_FILTER_BAR_WIDTH,
+  );

Review Comment:
   ### Unnecessary re-render from state initialization <sub>![category Performance](https://img.shields.io/badge/Performance-4f46e5)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   State initialization with a constant value that gets immediately overwritten in a callback function causes unnecessary re-renders.
   
   
   ###### Why this matters
   The component will render once with CLOSED_FILTER_BAR_WIDTH, then immediately re-render when setCurrentFilterBarWidth is called in the renderChild callback, causing layout thrashing and performance degradation.
   
   ###### Suggested change ∙ *Feature Preview*
   Initialize the state with a function that calculates the correct initial value based on the current filter bar state:
   
   ```typescript
   const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(() => 
     dashboardFiltersOpen ? OPEN_FILTER_BAR_WIDTH : CLOSED_FILTER_BAR_WIDTH
   );
   ```
   
   This prevents the initial render with an incorrect value and subsequent correction re-render.
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192/upvote) [![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192?what_not_true=true)  [![Not in Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192?what_out_of_scope=true) [![Not in coding standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192?what_not_in_standard=true) [![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/1b736ab3-3052-453b-91b7-8d87fc51a192)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:82157c30-9fb3-485a-b83a-4d8887860631 -->
   
   
   [](82157c30-9fb3-485a-b83a-4d8887860631)



##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -426,6 +426,9 @@ const DashboardBuilder = () => {
     isReport;
 
   const [barTopOffset, setBarTopOffset] = useState(0);
+  const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(
+    CLOSED_FILTER_BAR_WIDTH,
+  );

Review Comment:
   ### Initial filter bar width mismatch with actual state <sub>![category Functionality](https://img.shields.io/badge/Functionality-0284c7)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The initial state value may cause layout inconsistency during component initialization when the filter bar is actually open.
   
   
   ###### Why this matters
   If the dashboard loads with filters already open (dashboardFiltersOpen = true), the component will initially render with CLOSED_FILTER_BAR_WIDTH but then immediately update to the actual open width, causing a visual jump or layout shift during the initial render.
   
   ###### Suggested change ∙ *Feature Preview*
   Initialize the state based on the actual filter bar state:
   
   ```typescript
   const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(
     dashboardFiltersOpen ? OPEN_FILTER_BAR_WIDTH : CLOSED_FILTER_BAR_WIDTH,
   );
   ```
   
   Alternatively, if `dashboardFiltersOpen` is not available during initialization, consider using a useEffect to set the correct initial width immediately after mount.
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb/upvote) [![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb?what_not_true=true)  [![Not in Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb?what_out_of_scope=true) [![Not in coding standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb?what_not_in_standard=true) [![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a24f2c02-3749-438a-bebf-f6ae7e1c80eb)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:df76260c-0fb9-4719-bd55-521402279064 -->
   
   
   [](df76260c-0fb9-4719-bd55-521402279064)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "LevisNgigi (via GitHub)" <gi...@apache.org>.

LevisNgigi commented on PR #35984:
URL: https://github.com/apache/superset/pull/35984#issuecomment-3486831773

   /korbit-review


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.

github-actions[bot] commented on PR #35984:
URL: https://github.com/apache/superset/pull/35984#issuecomment-3494341323

   🎪 [Showtime](https://github.com/mistercrunch/superset-showtime) deployed environment on [GHA](https://github.com/apache/superset/actions/runs/19121094847) for [e2edb3e](https://github.com/apache/superset/commit/e2edb3e)
   
   • **Environment:** http://44.251.145.228:8080 (admin/admin)
   • **Lifetime:** 48h auto-cleanup
   • **Updates:** New commits create fresh environments automatically


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "korbit-ai[bot] (via GitHub)" <gi...@apache.org>.

korbit-ai[bot] commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2490359844


##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -426,6 +426,7 @@ const DashboardBuilder = () => {
     isReport;
 
   const [barTopOffset, setBarTopOffset] = useState(0);
+  const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(0);

Review Comment:
   ### Initial filter bar width state mismatch <sub>![category Functionality](https://img.shields.io/badge/Functionality-0284c7)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The currentFilterBarWidth state is initialized to 0 but may not reflect the actual filter bar width on initial render when dashboardFiltersOpen is true.
   
   
   ###### Why this matters
   This could cause the header's max-width calculation to be incorrect during the initial render, potentially leading to layout issues or content overflow until the state is properly updated.
   
   ###### Suggested change ∙ *Feature Preview*
   Initialize the state with the correct width based on the initial dashboardFiltersOpen state:
   
   ```typescript
   const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(
     dashboardFiltersOpen ? OPEN_FILTER_BAR_WIDTH : CLOSED_FILTER_BAR_WIDTH
   );
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a57db0d-ce5a-4b7c-8d3f-cac9aa520452/upvote) [![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a57db0d-ce5a-4b7c-8d3f-cac9aa520452?what_not_true=true)  [![Not in Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a57db0d-ce5a-4b7c-8d3f-cac9aa520452?what_out_of_scope=true) [![Not in coding standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a57db0d-ce5a-4b7c-8d3f-cac9aa520452?what_not_in_standard=true) [![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/8a57db0d-ce5a-4b7c-8d3f-cac9aa520452)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:ed982a52-9ffb-4fea-aea2-28574594e2e3 -->
   
   
   [](ed982a52-9ffb-4fea-aea2-28574594e2e3)



##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -426,6 +426,7 @@ const DashboardBuilder = () => {
     isReport;
 
   const [barTopOffset, setBarTopOffset] = useState(0);
+  const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(0);

Review Comment:
   ### Fragmented State Management <sub>![category Design](https://img.shields.io/badge/Design-0d9488)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   Component manages multiple pieces of related state separately that could be combined into a single state object.
   
   
   ###### Why this matters
   Scattered state management increases complexity and makes it harder to maintain state consistency across the component.
   
   ###### Suggested change ∙ *Feature Preview*
   Combine related state into a single object:
   ```typescript
   interface LayoutState {
     barTopOffset: number;
     filterBarWidth: number;
   }
   
   const [layoutState, setLayoutState] = useState<LayoutState>({
     barTopOffset: 0,
     filterBarWidth: 0
   });
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5596f4af-169b-48f8-b36b-ea07d08921a3/upvote) [![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5596f4af-169b-48f8-b36b-ea07d08921a3?what_not_true=true)  [![Not in Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5596f4af-169b-48f8-b36b-ea07d08921a3?what_out_of_scope=true) [![Not in coding standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5596f4af-169b-48f8-b36b-ea07d08921a3?what_not_in_standard=true) [![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5596f4af-169b-48f8-b36b-ea07d08921a3)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:8a6ab628-45bb-443e-8d71-5c6222a18d9b -->
   
   
   [](8a6ab628-45bb-443e-8d71-5c6222a18d9b)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "EnxDev (via GitHub)" <gi...@apache.org>.

EnxDev commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2511365964


##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -566,6 +570,7 @@ const DashboardBuilder = () => {
       const filterBarWidth = dashboardFiltersOpen
         ? adjustedWidth
         : CLOSED_FILTER_BAR_WIDTH;
+      setCurrentFilterBarWidth(filterBarWidth);

Review Comment:
   What do you think about updating the state only if the width actually changed to avoid unnecessary re-renders?
   ```suggestion
   if (filterBarWidth !== currentFilterBarWidth) {
     setCurrentFilterBarWidth(filterBarWidth);
   }
   ```



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "LevisNgigi (via GitHub)" <gi...@apache.org>.

LevisNgigi commented on code in PR #35984:
URL: https://github.com/apache/superset/pull/35984#discussion_r2511741474


##########
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx:
##########
@@ -614,7 +619,16 @@ const DashboardBuilder = () => {
             </ResizableSidebar>
           </>
         )}
-      <StyledHeader ref={headerRef}>
+      <StyledHeader
+        data-test="dashboard-header-wrapper"
+        ref={headerRef}
+        filterBarWidth={
+          showFilterBar &&
+          filterBarOrientation === FilterBarOrientation.Vertical
+            ? currentFilterBarWidth
+            : 0
+        }

Review Comment:
   Done



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [PR] fix: fix tabs overflow in dashboards [superset]

Posted by "LevisNgigi (via GitHub)" <gi...@apache.org>.

LevisNgigi closed pull request #35984: fix: fix tabs overflow in dashboards
URL: https://github.com/apache/superset/pull/35984


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org