Réglages plus grands et liste des filtres plus dense #17

Merged
claude Bot merged 1 commits from feat/reglages-mise-en-page into main 2026-10-03 16:39:59 +02:00

Requested by Cédric

Before: the settings dialog was capped at 900 × 660 px, sections were stacked in one narrow column, and Settings > Filters showed about eight tall tag rows at a time, with the add, preset and reset buttons at the bottom of the list.

After: the dialog uses most of the screen (up to 1280 px wide, full height minus a margin). Each section is a card, laid out in two columns when there is room: language and date side by side, syslog and host logs side by side with Docker below, theme and timeline side by side with log display below. In Settings > Filters, rows are about half as tall in one wide column, so long regular expressions stay readable. A toolbar stays in view while scrolling (add, preset, filter, reset). The filter matches keyword, label or code, and a counter shows "5 / 26 tags".

How: CSS grid on .set-panel (auto-fit, minmax(380px, 1fr), .span sections take the full width, .wide panels stay single-column). The tag toolbar is position: sticky, and filterTagList() hides rows without re-rendering them. On phones everything stays one column and the toolbar scrolls with the list. Checked in the browser at 1440 × 900 (light and dark) and 375 × 812.

🤖 Generated with Claude Code

<!-- ccr-projects-attribution: {"github_login":"vblogio"} --> _Requested by **Cédric**_ Before: the settings dialog was capped at 900 × 660 px, sections were stacked in one narrow column, and Settings > Filters showed about eight tall tag rows at a time, with the add, preset and reset buttons at the bottom of the list. After: the dialog uses most of the screen (up to 1280 px wide, full height minus a margin). Each section is a card, laid out in two columns when there is room: language and date side by side, syslog and host logs side by side with Docker below, theme and timeline side by side with log display below. In Settings > Filters, rows are about half as tall in one wide column, so long regular expressions stay readable. A toolbar stays in view while scrolling (add, preset, filter, reset). The filter matches keyword, label or code, and a counter shows "5 / 26 tags". How: CSS grid on `.set-panel` (`auto-fit, minmax(380px, 1fr)`, `.span` sections take the full width, `.wide` panels stay single-column). The tag toolbar is `position: sticky`, and `filterTagList()` hides rows without re-rendering them. On phones everything stays one column and the toolbar scrolls with the list. Checked in the browser at 1440 × 900 (light and dark) and 375 × 812. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
claude Bot added 1 commit 2026-10-03 16:33:59 +02:00
- The dialog uses most of the screen (up to 1280 px wide, full height);
  sections become cards laid out in two columns when there is room.
- Settings > Filters: compact tag rows in one wide column, a toolbar that
  stays in view (add, presets, filter, reset), a filter on keyword, label
  or code, and a tag count.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
claude Bot marked the pull request as ready for review 2026-10-03 16:39:31 +02:00
claude Bot merged commit e901de442c into main 2026-10-03 16:39:59 +02:00
claude Bot deleted branch feat/reglages-mise-en-page 2026-10-03 16:39:59 +02:00
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: vLab-BZH/logstream#17