fix: plugin page ui for big screen

[deadlyjack]

No description provided.

[greptile-apps]

Greptile Summary

This PR improves the plugin page layout for larger screens by restructuring the plugin-header grid and relocating the keywords section. The action-buttons row now spans the full header width via grid-column: 1/-1, and the keyword chips are moved from the always-visible plugin-info header into the Overview tab content, alongside the markdown body which is now rendered in a child <section> element.

• Grid layout fix: action-buttons gets grid-column: 1/-1 and flex-wrap: wrap; individual buttons use width: fit-content on desktop and flex: 1 on mobile (replacing the old flex-direction: column + width: 100% approach).
• Keywords relocated: moved from the plugin header (always visible) into the #overview tab section with matching SCSS scope change, making the header cleaner on wide viewports.
• Body rendering refactor: the sanitized markdown body now renders inside a <section innerHTML=…> child rather than setting innerHTML directly on the #overview container, allowing keywords and body to coexist as siblings.

Confidence Score: 4/5

Safe to merge; changes are purely presentational and the logic paths are straightforward.

The restructuring is clean and the CSS/JSX changes work correctly for the primary use cases. The one functional gap is that MoreInfo (shown only to users who purchased a plugin) is not given grid-column: 1/-1 like its sibling action-buttons, so the refund/ownership line may render in a narrow auto-sized column rather than spanning the full header width on desktop — a visual misalignment for a real but uncommon state.

The MoreInfo component placement in plugin.scss warrants a second look — it needs grid-column: 1/-1 (or equivalent) added to more-info-small to match how action-buttons is now laid out in the grid.

Important Files Changed

Filename	Overview
src/pages/plugin/plugin.scss	Layout overhaul for big-screen: action-buttons now spans full grid width (grid-column: 1/-1) with flex-wrap, .btn gets width: fit-content, mobile media query simplified to flex: 1, and keywords styles moved to #overview scope. Minor: MoreInfo lacks grid-column: 1/-1 so it may render in a narrow auto-width column on desktop when purchased.
src/pages/plugin/plugin.view.js	Keywords block moved from plugin-info header to the Overview tab content; body now renders in a child with innerHTML (DOMPurify sanitized) instead of setting innerHTML on the parent #overview div directly. No logic regressions.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[plugin-header grid\nauto 1fr auto] --> B[plugin-icon\ncol 1, row 1]
    A --> C[plugin-info\ncol 2, row 1]
    A --> D[action-buttons\ngrid-column: 1/-1 → row 2, full width]
    A --> E[MoreInfo\nauto-placed → row 3, col 1 only]

    F[tab-content] --> G[#overview\n.content-section.md]
    G --> H[keywords div\nmoved from plugin-info]
    G --> I[section\ninnerHTML=DOMPurify body]

    subgraph Before
        OldInfo[plugin-info] --> OldKW[keywords]
        OldOverview[#overview div\ninnerHTML=body]
    end

    subgraph After
        NewInfo[plugin-info\nno keywords]
        NewOverview[#overview div] --> NewKW[keywords]
        NewOverview --> NewSection[section\ninnerHTML=body]
    end

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[plugin-header grid\nauto 1fr auto] --> B[plugin-icon\ncol 1, row 1]
    A --> C[plugin-info\ncol 2, row 1]
    A --> D[action-buttons\ngrid-column: 1/-1 → row 2, full width]
    A --> E[MoreInfo\nauto-placed → row 3, col 1 only]

    F[tab-content] --> G[#overview\n.content-section.md]
    G --> H[keywords div\nmoved from plugin-info]
    G --> I[section\ninnerHTML=DOMPurify body]

    subgraph Before
        OldInfo[plugin-info] --> OldKW[keywords]
        OldOverview[#overview div\ninnerHTML=body]
    end

    subgraph After
        NewInfo[plugin-info\nno keywords]
        NewOverview[#overview div] --> NewKW[keywords]
        NewOverview --> NewSection[section\ninnerHTML=body]
    end

Loading

_{Reviews (1): Last reviewed commit: "fix: plugin page ui for big screen" | Re-trigger Greptile}

[greptile-apps]

MoreInfo sibling not given matching grid-column span

action-buttons now receives grid-column: 1/-1 so it occupies its own full-width row, but the adjacent MoreInfo component (rendered as <small class="more-info-small">) has no explicit grid-column. Grid auto-placement puts it in row 3 at column 1 (width: auto per the column template), so its text-align: center only centers text within a narrow box rather than across the full header width. For purchased plugins, the ownership/refund line may appear left-aligned and clipped rather than centered under the buttons.