alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-09-20 18:51:26 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): keep full-width modal fields inside their clipped container

Browse Source 
Two stacked defects cut the side edges off the URL textareas in the
download and batch-import modals.

`#modelUrl` and `#batchUrlInput` are `width: 100%` with padding and a
border but no `box-sizing: border-box`, so the border box was wider than
the containing block and its right edge landed in the region the modal
clips: the right border column is missing in both screenshots while the
corner pixels of the top/bottom borders are drawn, and the batch
textarea's resize handle sits a padding-width to the right of the mode
toggle above it.

The download modal's `#downloadModal .download-step` additionally
scrolls with `overflow-x: hidden` and has no horizontal padding, so the
global `:focus-visible { outline-offset: 2px }` lost both vertical edges
there and only the top and bottom lines survived. Draw that ring inset
inside `#downloadModal`, mirroring the existing `#importModal` fix in
import-modal.css.

`.input-group input, .input-group select` gets the same border-box
treatment, which also repairs the standing clipped right border on the
other full-width fields the shared rule styles (the import modal's URL,
recipe-name and tag inputs, the batch directory and tags inputs, the
model root select and the target folder path).

Verified: `npx vitest run` 130 files / 1259 tests passed.
This commit is contained in:
Will Miao
2026-09-17 07:54:57 +08:00
parent 1d6da1787a
commit f67689b0f9
2 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/batch-import-modal.css
+4
View File
@@ -31,6 +31,10 @@
/* Textarea Styling */
#batchUrlInput {
width: 100%;
/* Content-box sizing made the border box wider than the modal's content
box, so the right border/halo fell outside the clipped area and was cut
off. Include padding and border in the declared width. */
box-sizing: border-box;
min-height: 120px;
padding: 12px;
border: 1px solid var(--border-color);
static/css/components/modal/download-modal.css
+17
View File
@@ -12,6 +12,10 @@
.input-group input,
.input-group select {
width: 100%;
/* Include padding/border in the declared width so full-width fields do not
spill past the modal's content box, where their right border gets
clipped by the step's overflow-x: hidden. */
box-sizing: border-box;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);
@@ -720,6 +724,9 @@
/* Textarea for multi-URL input */
#modelUrl {
width: 100%;
/* Content-box sizing pushed the border box 2px past the step's content
edge, clipping the right border. Include padding/border in the width. */
box-sizing: border-box;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);
@@ -768,6 +775,16 @@
scrollbar-gutter: stable;
}
/* Fields sit flush against the scrollable step's content edge; the global
focus outline (offset: 2px) has its left/right edges clipped by the step's
overflow-x. Draw the ring inset so the full outline stays visible.
(Same fix as #importModal in import-modal.css.) */
#downloadModal input:focus-visible,
#downloadModal select:focus-visible,
#downloadModal textarea:focus-visible {
outline-offset: -2px;
}
#downloadModal .download-step .modal-actions {
position: sticky;
bottom: 0;