diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 69d29e0..27e3437 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -11,6 +11,9 @@ * Settings panels are collapsed by default when opening the Admin and Profile pages ### Fixed * Fixed element ID conflict on the Admin page so Available Themes load correctly + * Positioned new-entry tag checkboxes after their label text + * Kept new-entry tag checkboxes immediately left of their labels at all viewport sizes + * Prevented the new-entry form grid from placing tag checkboxes above their labels ## Version v0.1.1 ### Features diff --git a/VIBE/CHAT_LOG.md b/VIBE/CHAT_LOG.md index 023fab3..bc062d8 100644 --- a/VIBE/CHAT_LOG.md +++ b/VIBE/CHAT_LOG.md @@ -1340,3 +1340,21 @@ On the admin page under Available Themes, the page does not load available theme ### Assistant outcome Fixed element ID conflict on `admin.html` where both the header theme submenu and the admin form container used `id="theme-options"`. Renamed the admin form container to `id="admin-theme-options"` and updated `admin.js` to target `#admin-theme-options`. Available themes now load correctly on the admin page. Passed all 55 tests. + +### User +on the new-entry page the checkbox should be following the labels - now they are positioned above. + +### Assistant outcome +Reordered the new-entry tag control markup so each label is followed by its checkbox. JavaScript syntax validation and the focused API test module passed with 35 tests. + +### User +The checkboxes should be immediately to the left of the label not below left + +### Assistant outcome +Restored checkbox-before-label ordering and added a scoped compact-sizing rule for new-entry tag checkboxes. This prevents the mobile global input-width rule from placing a checkbox on its own line. JavaScript syntax validation and the focused API test module passed with 35 tests. + +### User +The checkbox takes the full width of the grid which forces the label to be printed underneath instead of directly next to it. + +### Assistant outcome +Fixed the actual layout conflict: `.form-section label` uses a grid layout whose selector overrode the tag label's flex layout. Added the more specific `.form-section label.tag-checkbox` inline-flex rule and reset its checkbox margin, keeping each checkbox directly left of its tag text. The focused API test module passed with 35 tests and `git diff --check` passed. diff --git a/VIBE/PROMPTS.md b/VIBE/PROMPTS.md index 0b38f10..ac42c8b 100644 --- a/VIBE/PROMPTS.md +++ b/VIBE/PROMPTS.md @@ -239,6 +239,9 @@ 218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page. 219. Clicking on the collapse button doesn't toggle 218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page. +223. On the new-entry page the checkbox should be following the labels - now they are positioned above. +224. The checkboxes should be immediately to the left of the label not below left +225. The checkbox takes the full width of the grid which forces the label to be printed underneath instead of directly next to it. ## Future entries diff --git a/frontend/static/style.css b/frontend/static/style.css index 683994d..c005461 100644 --- a/frontend/static/style.css +++ b/frontend/static/style.css @@ -1065,7 +1065,15 @@ button:disabled { user-select: none; } +.form-section label.tag-checkbox { + display: inline-flex; +} + .tag-checkbox input { + width: auto; + min-width: 0; + flex: 0 0 auto; + margin: 0; cursor: pointer; }