Skip to content

fix(docs): fix width of tools table#8625

Merged
jdx merged 1 commit intojdx:mainfrom
himkt:registry-tool-table
Mar 19, 2026
Merged

fix(docs): fix width of tools table#8625
jdx merged 1 commit intojdx:mainfrom
himkt:registry-tool-table

Conversation

@himkt
Copy link
Copy Markdown
Contributor

@himkt himkt commented Mar 17, 2026

I think the layout of tools table is not expected. Currently 50% is assigned for short and full respectively, resulting in the 0% width provided for a platform column. This PR reduces the width for short and increase the widths for full and os. I reduced the width for short given the assumption that full is (almost) always longer than short but please correct me if that's wrong.

before after
Screenshot From 2026-03-17 21-23-58 Screenshot From 2026-03-17 21-24-07

@gemini-code-assist
Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves a display anomaly in the documentation's tools table by reconfiguring the column widths. The changes ensure that all table columns, particularly the platform column, are correctly rendered and proportioned, significantly enhancing the table's readability and overall presentation.

Highlights

  • Table Layout Fix: Adjusted the CSS width and min-width properties for the first two columns of the .full-width table in registry.vue to correct a layout issue.
  • Column Width Reallocation: Reduced the width of the first column (short description) from 50% to 25% and increased the width of the second column (full description) from 50% to 55%.
  • Third Column Visibility: Ensured the third column (platform/OS), which previously had 0% width, is now properly displayed and sized within the table.
Changelog
  • docs/components/registry.vue
    • Updated the min-width and width properties for the first column (th:nth-child(1), td:nth-child(1)) from 40%/50% to 25%/25%.
    • Updated the min-width and width properties for the second column (th:nth-child(2), td:nth-child(2)) from 40%/50% to 55%/55%.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Mar 17, 2026

Greptile Summary

This PR fixes the width distribution of the three-column tools registry table (Short, Full, OS) in docs/components/registry.vue. Previously, the Short and Full columns each claimed 50% of the table width, summing to 100% and leaving no effective space for the OS column despite its min-width: 20% declaration (which is ignored by table-layout: fixed when explicit widths already fill the available space). The fix reduces Short to 25%, increases Full to 55%, and allows the remaining 20% to be naturally claimed by the OS column — exactly matching its existing min-width constraint.

  • Column 1 (Short): 50%25%
  • Column 2 (Full): 50%55%
  • Column 3 (OS): previously rendered at 0% effective width, now correctly receives ~20%
  • Total across all three columns now sums to exactly 100% under table-layout: fixed

Confidence Score: 5/5

  • This PR is safe to merge — it is a minimal, targeted CSS fix with no logic changes.
  • The change is a one-file, four-line CSS adjustment that directly addresses the documented rendering problem. The new widths (25% + 55% = 80%) leave exactly 20% for the OS column, which aligns perfectly with the existing min-width: 20% on that column. No JavaScript, template, or data logic is touched.
  • No files require special attention.

Important Files Changed

Filename Overview
docs/components/registry.vue Reduces column 1 (Short) width from 50% to 25% and increases column 2 (Full) width from 50% to 55%, leaving a proper 20% for the OS column instead of the previous 0% effective allocation.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    subgraph BEFORE["Before (broken layout)"]
        B1["Short — 50%"]
        B2["Full — 50%"]
        B3["OS — 0% effective\n(min-width: 20% ignored\nby table-layout: fixed)"]
    end
    subgraph AFTER["After (fixed layout)"]
        A1["Short — 25%"]
        A2["Full — 55%"]
        A3["OS — 20%\n(remaining space matches\nmin-width: 20%)"]
    end
    BEFORE -->|"This PR"| AFTER
Loading

Last reviewed commit: 1612166

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

The pull request effectively resolves the table layout issue by adjusting the column widths in docs/components/registry.vue. The changes ensure that all columns, including the platform column, are properly displayed, improving the readability of the table.

Comment on lines +121 to +122
min-width: 25%;
width: 25%;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The min-width property is redundant when its value is identical to the width property, especially in a table-layout: fixed context where width explicitly controls the column size. Removing the min-width property simplifies the CSS without changing the visual outcome.

  width: 25%;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also thought that but the original codebase has min-width so decided not to delete. If that'd be better to drop, please let me know.

Comment on lines +127 to +128
min-width: 55%;
width: 55%;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Similar to the first column, the min-width property here is redundant as its value matches the width property. For clarity and conciseness, consider removing the min-width declaration.

  width: 55%;

@himkt himkt changed the title docs: fix width of tools table fix(docs): fix width of tools table Mar 18, 2026
@jdx jdx merged commit ffa1e11 into jdx:main Mar 19, 2026
37 checks passed
@himkt himkt deleted the registry-tool-table branch March 19, 2026 23:33
jdx pushed a commit that referenced this pull request Mar 21, 2026
### 🐛 Bug Fixes

- **(config)** resolve trust hash collision for same-name directories by
@tdragon in [#8628](#8628)
- **(docs)** fix width of tools table by @himkt in
[#8625](#8625)
- **(docs)** prevent homepage hero atmosphere overflow by @nygmaaa in
[#8642](#8642)
- **(doctor)** detect PATH ordering issues when mise is activated by
@jdx in [#8585](#8585)
- **(git)** use origin as remote name by @bentinata in
[#8626](#8626)
- **(installer)** normalize current version before comparison by @tak848
in [#8649](#8649)
- **(lockfile)** Resolve symlink when updating lockfiles by @chancez in
[#8589](#8589)
- **(python)** verify checksums for precompiled binary downloads by
@malept in [#8593](#8593)
- **(rust)** resolve relative CARGO_HOME/RUSTUP_HOME to absolute paths
by @simonepri in [#8604](#8604)
- **(task)** correctly resolve task name for _default files with
extensions by @youta1119 in
[#8646](#8646)
- **(tasks)** global file tasks not properly marked as such by @roele in
[#8618](#8618)
- **(tasks)** handle broken pipe in table print and task completion
output by @vmaleze in [#8608](#8608)
- use dark/light logo variants in README for GitHub dark mode by @jdx in
[#8656](#8656)
- failing rebuild of runtime symlinks for shared tools by @roele in
[#8647](#8647)
- add spaces around current element operator in flutter version_expr by
@roele in [#8616](#8616)
- complete task arguments correctly by @KevSlashNull in
[#8601](#8601)

### 📚 Documentation

- switch body font to DM Sans and darken dark mode background by @jdx in
[6e3ad34](6e3ad34)
- use Cormorant Garamond for headers and Roc Grotesk for body text by
@jdx in
[010812a](010812a)
- resolve chaotic heading hierarchy in task-arguments.md by @muzimuzhi
in [#8644](#8644)

### 🧪 Testing

- fix test_java and mark as slow by @roele in
[#8634](#8634)

### 📦️ Dependency Updates

- update docker/dockerfile:1 docker digest to 4a43a54 by @renovate[bot]
in [#8657](#8657)
- update ghcr.io/jdx/mise:alpine docker digest to 2584470 by
@renovate[bot] in [#8658](#8658)

### 📦 Registry

- add viteplus (npm:vite-plus) by @risu729 in
[#8594](#8594)
- remove backend.options for podman by @roele in
[#8633](#8633)
- add pi.dev coding agent by @dector in
[#8635](#8635)
- add ormolu ([github:tweag/ormolu](https://github.com/tweag/ormolu)) by
@3w36zj6 in [#8617](#8617)
- use version_expr for dart and sort versions by @roele in
[#8631](#8631)

### New Contributors

- @bentinata made their first contribution in
[#8626](#8626)
- @tdragon made their first contribution in
[#8628](#8628)
- @nygmaaa made their first contribution in
[#8642](#8642)
- @youta1119 made their first contribution in
[#8646](#8646)
- @chancez made their first contribution in
[#8589](#8589)
- @dector made their first contribution in
[#8635](#8635)
- @tak848 made their first contribution in
[#8649](#8649)

## 📦 Aqua Registry Updates

#### New Packages (5)

- [`acsandmann/rift`](https://github.com/acsandmann/rift)
-
[`alltuner/mise-completions-sync`](https://github.com/alltuner/mise-completions-sync)
- [`berbicanes/apiark`](https://github.com/berbicanes/apiark)
-
[`gitlab.com/graphviz/graphviz`](https://github.com/gitlab.com/graphviz/graphviz)
-
[`jorgelbg/pinentry-touchid`](https://github.com/jorgelbg/pinentry-touchid)

#### Updated Packages (7)

- [`UpCloudLtd/upcloud-cli`](https://github.com/UpCloudLtd/upcloud-cli)
- [`aquaproj/registry-tool`](https://github.com/aquaproj/registry-tool)
- [`go-swagger/go-swagger`](https://github.com/go-swagger/go-swagger)
-
[`gopinath-langote/1build`](https://github.com/gopinath-langote/1build)
- [`sassman/t-rec-rs`](https://github.com/sassman/t-rec-rs)
- [`sharkdp/fd`](https://github.com/sharkdp/fd)
- [`temporalio/cli`](https://github.com/temporalio/cli)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants