diff --git a/static/css/components/batch-import-modal.css b/static/css/components/batch-import-modal.css index 7061c8e5..70dd811a 100644 --- a/static/css/components/batch-import-modal.css +++ b/static/css/components/batch-import-modal.css @@ -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); diff --git a/static/css/components/modal/download-modal.css b/static/css/components/modal/download-modal.css index 8bfa5f12..63386a5b 100644 --- a/static/css/components/modal/download-modal.css +++ b/static/css/components/modal/download-modal.css @@ -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;