Grids: put the search box inline with the buttons - #1760
Merged
Merged
Conversation
The shared DataTables dom string gave search a row of its own above the buttons, which spent a full line of height on one input and left the rest of that line blank on every grid. Length menu, buttons and search now share one flex row, with search pushed right. The search wrapper gets an explicit min-width. A flex item's default min-width (auto) is the input's intrinsic ~280px, which beside the host list's button bar wrapped search onto its own line below the buttons at a 1600px window. Measured on the lab server, host list toolbar height: window before after 1920px 77px 33px 1600px 77px 33px 1000px 110px 106px (the buttons themselves wrap here) 420px 194px 178px fog-default-ui.min.css rebuilt with sass 1.77.8; FOG_BCACHE_VER 368. tests/datatables-search-inline.test.php pins the dom strings, the SCSS rule and the compiled rule; three mutations each turn it red. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CS4se5nzmQWk9Cf3dinW4p
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Every grid put its search box on a row of its own above the buttons. The row held one input on the right and nothing on the left, so each grid lost a line of height to blank space.
Cause
The shared DataTables
domstring infogDefaults()(fog.common.js) placedfin arowaboveB:<'row'<'col-sm-6'l><'col-sm-6'f>>B.Change
domstrings (paged and infinite scroll) now put the length menu, the buttons and search in one flex row,.fog-dt-toolbar, with search pushed right..fog-dt-searchinfog-default-ui.scsslets the search box shrink from 20rem down to 10rem, so it stays beside a wide button bar. Itsmin-widthis explicit on purpose. The default (auto) resolves to the input's intrinsic ~280px, and that value, not the flex basis, decides whether the box fits on the line.fog-default-ui.min.cssrebuilt with sass 1.77.8.FOG_BCACHE_VER367 → 368.Verification
A Playwright A/B on the lab server. The only difference between runs was the served
fog.common.jsandfog-default-ui.min.css: deployed copy, or this branch's copy. Host list toolbar height, from the top of the grid to the table:No width scrolls the page sideways. The agent activity grid, with fewer buttons, also goes from 77px to 33px at 1600px.
tests/datatables-search-inline.test.phppins bothdomstrings, the SCSS rule and the compiled rule. Three mutations each turn it red: the olddomstring,min-widthdropped from the SCSS, and the.min.cssleft unrebuilt.Not verified live: paged mode, the one variant that shows the length menu. Forcing
#scrollModein the test browser did not change how the grid initialized. The paged string differs from the infinite one only bylin the same toolbar, and the test pins it.🤖 Generated with Claude Code
https://claude.ai/code/session_01CS4se5nzmQWk9Cf3dinW4p