frontend: views: ExtensionManagerView: center extension manager tabs

[nicoschmdt]

fix #2942

before:

zoomed-in:

after:

zoomed-in:

Summary by Sourcery

Center the extension manager tab bar while keeping the settings button consistently positioned.

Enhancements:

• Adjust ExtensionManagerView toolbar layout so tabs fill available space and remain centered across viewport sizes.
• Pin the extension manager settings button to the right side of the toolbar on larger screens for a stable, predictable location.

[sourcery-ai]

Reviewer's Guide

Centers the Extension Manager tabs within the toolbar and keeps the Settings button aligned to the right via flexbox and responsive CSS adjustments.

Flow diagram for ExtensionManagerView toolbar layout changes

flowchart LR
  ExtensionToolbar[ExtensionToolbar v_toolbar extension_toolbar] --> ExtensionTabs[ExtensionTabs v_tabs extension_tabs]
  ExtensionToolbar --> SettingsButton[SettingsButton v_btn extension_toolbar_settings]

  subgraph FlexLayout
    ExtensionTabsFlex[extension_tabs flex 1_1_0 min_width 0]
    SettingsButtonFlex[extension_toolbar_settings flex_shrink 0]
  end

  ExtensionTabs --> ExtensionTabsFlex
  SettingsButton --> SettingsButtonFlex

  subgraph DesktopMediaQuery min_width_900px
    SettingsButtonPosition[extension_toolbar_settings position absolute right 16px top 50_percent translateY_minus_50_percent]
  end

  SettingsButtonFlex --> DesktopMediaQuery
  DesktopMediaQuery --> SettingsButtonPosition

Loading

File-Level Changes

Change	Details	Files
Refactor the extension manager toolbar layout to center tabs and decouple the Settings button from tab sizing.	Replace spacer-based centering with a custom toolbar class to control positioning context. Configure v-tabs with flex growth and overflow-safe min-width via a new CSS class. Prevent the Settings button from shrinking with the tabs and move alignment control to a dedicated class. Use a media query on wider viewports to absolutely position the Settings button to the right and vertically center it within the toolbar.	core/frontend/src/views/ExtensionManagerView.vue

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#2942	Center the extension manager tabs within the card/toolbar so they are visually centered and no longer pushed left by the settings cog.	✅
#2942	When horizontal space runs out, have the tabs become scrollable and be cut off on the right under the settings cog (rather than shifting layout), so they can scroll out from underneath it.	✅

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• The custom centering and right-align behavior for the toolbar could likely be expressed using Vuetify’s layout utilities (e.g., justify-center, v-spacer, class="ml-auto") instead of absolute positioning, which would simplify the CSS and reduce layout edge cases.
• Consider replacing the hardcoded @media (min-width: 900px) and right: 16px breakpoint/spacing values with existing design system or Vuetify breakpoint/spacing tokens so the layout stays consistent with the rest of the app’s responsive behavior.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The custom centering and right-align behavior for the toolbar could likely be expressed using Vuetify’s layout utilities (e.g., `justify-center`, `v-spacer`, `class="ml-auto"`) instead of absolute positioning, which would simplify the CSS and reduce layout edge cases.
- Consider replacing the hardcoded `@media (min-width: 900px)` and `right: 16px` breakpoint/spacing values with existing design system or Vuetify breakpoint/spacing tokens so the layout stays consistent with the rest of the app’s responsive behavior.

## Individual Comments

### Comment 1
<location path="core/frontend/src/views/ExtensionManagerView.vue" line_range="218-226" />
<code_context>
     />
-    <v-toolbar>
-      <v-spacer />
+    <v-toolbar class="extension-toolbar">
       <v-tabs
         v-model="tab"
</code_context>
<issue_to_address>
**issue (bug_risk):** Absolute positioning of the settings button may overlap the tabs without reserving horizontal space.

With `.extension-toolbar-settings` absolutely positioned, the tabs can extend underneath it because the toolbar no longer reserves horizontal space for the button. Around the breakpoint this can cause the settings icon to overlap tab labels or arrows.

Consider adding right padding or a max-width on `.extension-toolbar` (or similar layout change) so the tabs never render under the settings icon.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

issue (bug_risk): Absolute positioning of the settings button may overlap the tabs without reserving horizontal space.

With .extension-toolbar-settings absolutely positioned, the tabs can extend underneath it because the toolbar no longer reserves horizontal space for the button. Around the breakpoint this can cause the settings icon to overlap tab labels or arrows.

Consider adding right padding or a max-width on .extension-toolbar (or similar layout change) so the tabs never render under the settings icon.