At 390 px, Configs, Scripts and Plugins are wider than the screen. Configs cuts off its search box, filters and tables, and Scripts and Plugins can be dragged sideways into an empty band. There are two separate causes.
library.css:14-25 puts each library table inside .library-table with overflow-x: auto, and gives the table min-width: 680px, so the table is meant to scroll inside that frame on phones.
ConfigLibrary.svelte:657-660 makes .config-panel a grid with no column template. Its one column grows to fit the 680 px table, so the toolbar and both sections become 682 px wide and the page is 698 px. The search box, the "All scopes" filter and the tables run off the edge, and the "All statuses" filter is entirely off-screen.
scripts/+page.svelte:306 and plugins/+page.svelte:391 put a hidden <span class="sr-only">Next action</span> in the last header cell. .sr-only is position: absolute (components.css:107-114), and .library-table isn't positioned, so the label is placed relative to the page and the table frame doesn't clip it. It sits at the table's right edge and widens the page to 675 px on Scripts and 586 px on Plugins.
Desktop is unaffected: all three pages are 1440 px wide at 1440 px. The problem is the same on e3e740c, so it isn't from the #126 or #130 changes. These are the only two hidden labels inside table headers in src/.
Screenshots
All at 390 px in the synthetic preview. The fixture has no plugins, so I uploaded one harmless plugin to the disposable fixture through POST /api/plugins to make the Plugins table appear. The mockup is the two CSS changes in the fix.
Before, Configs:
After (mockup), Configs:
Before, Scripts scrolled fully right:
After (mockup), Scripts scrolled fully right (nothing moves):
Before, Plugins scrolled fully right:
After (mockup), Plugins scrolled fully right (nothing moves):
Fix
Give .config-panel a grid-template-columns: minmax(0, 1fr) column, so its tables scroll inside .library-table instead of setting the column width
Add position: relative to .library-table, so the hidden header stays inside the table's scroll frame
At 390 px, Configs, Scripts and Plugins are no wider than the screen, and each table scrolls inside its own frame
At 390 px, Configs, Scripts and Plugins are wider than the screen. Configs cuts off its search box, filters and tables, and Scripts and Plugins can be dragged sideways into an empty band. There are two separate causes.
- `library.css:14-25` puts each library table inside `.library-table` with `overflow-x: auto`, and gives the table `min-width: 680px`, so the table is meant to scroll inside that frame on phones.
- `ConfigLibrary.svelte:657-660` makes `.config-panel` a grid with no column template. Its one column grows to fit the 680 px table, so the toolbar and both sections become 682 px wide and the page is 698 px. The search box, the "All scopes" filter and the tables run off the edge, and the "All statuses" filter is entirely off-screen.
- `scripts/+page.svelte:306` and `plugins/+page.svelte:391` put a hidden `<span class="sr-only">Next action</span>` in the last header cell. `.sr-only` is `position: absolute` (`components.css:107-114`), and `.library-table` isn't positioned, so the label is placed relative to the page and the table frame doesn't clip it. It sits at the table's right edge and widens the page to 675 px on Scripts and 586 px on Plugins.
Desktop is unaffected: all three pages are 1440 px wide at 1440 px. The problem is the same on e3e740c, so it isn't from the #126 or #130 changes. These are the only two hidden labels inside table headers in `src/`.
**Screenshots**
All at 390 px in the synthetic preview. The fixture has no plugins, so I uploaded one harmless plugin to the disposable fixture through `POST /api/plugins` to make the Plugins table appear. The mockup is the two CSS changes in the fix.
Before, Configs:
After (mockup), Configs:
Before, Scripts scrolled fully right:
After (mockup), Scripts scrolled fully right (nothing moves):
Before, Plugins scrolled fully right:
After (mockup), Plugins scrolled fully right (nothing moves):
**Fix**
- [x] Give `.config-panel` a `grid-template-columns: minmax(0, 1fr)` column, so its tables scroll inside `.library-table` instead of setting the column width
- [x] Add `position: relative` to `.library-table`, so the hidden header stays inside the table's scroll frame
- [x] At 390 px, Configs, Scripts and Plugins are no wider than the screen, and each table scrolls inside its own frame
Table containment.library.css:15 positions the scrolling frame relative to its hidden header labels.
Browser validation. Chromium at 390 px reports document width 390 on Configs, Scripts and Plugins. Each table frame is 356 px wide, its content is 680 px, and internal horizontal scrolling reaches 324 px. At 1440 px, each document stays 1440 px with no table overflow.
Review notes
Reviewed current EC main at fa0baa8db5. Full application suite passed: 230 files, 3,120 tests, including migration-memory coverage; no failures or skips.
Python agent suite: 332 tests passed, no skips. Type/style checks: zero errors and warnings.
Used a disposable synthetic fixture with a harmless plugin row; no production data changed.
Reviewed 106d3a5ded381c436dd3f594888a66a55ac9b62d. All fix items are complete; closing this issue.
**Checklist**
- [x] **Config grid.** `ConfigLibrary.svelte:665` uses `minmax(0, 1fr)`.
- [x] **Table containment.** `library.css:15` positions the scrolling frame relative to its hidden header labels.
- [x] **Browser validation.** Chromium at 390 px reports document width 390 on Configs, Scripts and Plugins. Each table frame is 356 px wide, its content is 680 px, and internal horizontal scrolling reaches 324 px. At 1440 px, each document stays 1440 px with no table overflow.
**Review notes**
- Reviewed current EC main at fa0baa8db5f7629de3f58f2e6bf8da0568018be0. Full application suite passed: 230 files, 3,120 tests, including migration-memory coverage; no failures or skips.
- Python agent suite: 332 tests passed, no skips. Type/style checks: zero errors and warnings.
- Used a disposable synthetic fixture with a harmless plugin row; no production data changed.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
At 390 px, Configs, Scripts and Plugins are wider than the screen. Configs cuts off its search box, filters and tables, and Scripts and Plugins can be dragged sideways into an empty band. There are two separate causes.
library.css:14-25puts each library table inside.library-tablewithoverflow-x: auto, and gives the tablemin-width: 680px, so the table is meant to scroll inside that frame on phones.ConfigLibrary.svelte:657-660makes.config-panela grid with no column template. Its one column grows to fit the 680 px table, so the toolbar and both sections become 682 px wide and the page is 698 px. The search box, the "All scopes" filter and the tables run off the edge, and the "All statuses" filter is entirely off-screen.scripts/+page.svelte:306andplugins/+page.svelte:391put a hidden<span class="sr-only">Next action</span>in the last header cell..sr-onlyisposition: absolute(components.css:107-114), and.library-tableisn't positioned, so the label is placed relative to the page and the table frame doesn't clip it. It sits at the table's right edge and widens the page to 675 px on Scripts and 586 px on Plugins.Desktop is unaffected: all three pages are 1440 px wide at 1440 px. The problem is the same on
e3e740c, so it isn't from the #126 or #130 changes. These are the only two hidden labels inside table headers insrc/.Screenshots
All at 390 px in the synthetic preview. The fixture has no plugins, so I uploaded one harmless plugin to the disposable fixture through
POST /api/pluginsto make the Plugins table appear. The mockup is the two CSS changes in the fix.Before, Configs:
After (mockup), Configs:
Before, Scripts scrolled fully right:
After (mockup), Scripts scrolled fully right (nothing moves):
Before, Plugins scrolled fully right:
After (mockup), Plugins scrolled fully right (nothing moves):
Fix
.config-panelagrid-template-columns: minmax(0, 1fr)column, so its tables scroll inside.library-tableinstead of setting the column widthposition: relativeto.library-table, so the hidden header stays inside the table's scroll frameReviewed
106d3a5ded. All fix items are complete; closing this issue.Checklist
ConfigLibrary.svelte:665usesminmax(0, 1fr).library.css:15positions the scrolling frame relative to its hidden header labels.Review notes
fa0baa8db5. Full application suite passed: 230 files, 3,120 tests, including migration-memory coverage; no failures or skips.