Scrollbar thumbs have no minimum size

[AtkinsSJ]

Discovered while working on the stylesheet inspector, with some files that are arranged on a single long line. Here's a screenshot with the window super narrow to exaggerate the issue:

That small vertical line above Computed Style is the horizontal scrollbar's thumb. It's unclickable.

When the window is larger, the thumb is large enough to interact with, but when scrolled fully to the left, part of the thumb is off the edge of the viewport:

Reduced test case

Note that the `margin: 0;` on the `` is important for the "scrollbar thumb goes off screen" issue. ```html

*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,input:where(:not([type])):focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors: active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media (forced-colors: active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.-top-4{top:-1rem}.-top-\[60px\]{top:-60px}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-10{z-index:10}.z-20{z-index:20}.z-\[2\]{z-index:2}.order-1{order:1}.order-2{order:2}.-my-4{margin-top:-1rem;margin-bottom:-1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-16{margin-top:4rem;margin-bottom:4rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-\[0\.8em\]{margin-bottom:.8em}.mb-\[64px\]{margin-bottom:64px}.mt-10{margin-top:2.5rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-8{height:2rem}.h-\[1px\]{height:1px}.h-\[335px\]{height:335px}.h-\[535px\]{height:535px}.h-fit{height:-moz-fit-content;height:fit-content}.max-h-\[695px\]{max-height:695px}.min-h-\[102px\]{min-height:102px}.min-h-screen{min-height:100vh}.w-36{width:9rem}.w-8{width:2rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-48{max-width:12rem}.max-w-96{max-width:24rem}.max-w-\[600px\]{max-width:600px}.max-w-\[800px\]{max-width:800px}.max-w-\[832px\]{max-width:832px}.grow{flex-grow:1}.list-disc{list-style-type:disc}.grid-cols-\[1fr\]{grid-template-columns:1fr}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-14{gap:3.5rem}.gap-16{gap:4rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.rounded-\[30px\]{border-radius:30px}.rounded-\[40px\]{border-radius:40px}.rounded-full{border-radius:9999px}.border-\[6px\]{border-width:6px}.border-t-\[1px\]{border-top-width:1px}.border-solid{border-style:solid}.border-\[\#fff\]{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.border-t-\[\#303030\]{--tw-border-opacity: 1;border-top-color:rgb(48 48 48 / var(--tw-border-opacity))}.bg-\[\#000\]{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-\[\#16141b\]{--tw-bg-opacity: 1;background-color:rgb(22 20 27 / var(--tw-bg-opacity))}.bg-\[\#d3d2d6\]{--tw-bg-opacity: 1;background-color:rgb(211 210 214 / var(--tw-bg-opacity))}.bg-\[url\(\'\.\.\/\.\.\/\.\.\/assets\/img\/discover-bg\.webp\'\)\]{background-image:url(../../../assets/img/discover-bg.webp)}.bg-\[url\(\'\.\.\/\.\.\/\.\.\/assets\/img\/hero\.webp\'\)\]{background-image:url(../../../assets/img/hero.webp)}.bg-\[url\(\'\/assets\/img\/blurp\.webp\'\)\]{background-image:url(/assets/img/blurp.webp)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#6d98cc\]{--tw-gradient-from: #6d98cc var(--tw-gradient-from-position);--tw-gradient-to: rgb(109 152 204 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[\#8a64e5\]{--tw-gradient-to: #8a64e5 var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-\[20px\]{padding:20px}.px-0{padding-left:0;padding-right:0}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0{padding-top:0;padding-bottom:0}.py-\[30px\]{padding-top:30px;padding-bottom:30px}.pb-0{padding-bottom:0}.pb-5{padding-bottom:1.25rem}.pe-5{padding-inline-end:1.25rem}.pt-12{padding-top:3rem}.pt-\[80px\]{padding-top:80px}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[36px\]{font-size:36px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-\[\#000\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-\[\#fff\]{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-black{--tw-text-opacity: 1;color:rgb(14 14 14 / var(--tw-text-opacity))}.text-transparent{color:transparent}.shadow-\[0_0_8px_0_rgba\(202\,205\,226\,0\.38\)\]{--tw-shadow: 0 0 8px 0 rgba(202,205,226,.38);--tw-shadow-colored: 0 0 8px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-\[\#8a64e5\]:hover{--tw-bg-opacity: 1;background-color:rgb(138 100 229 / var(--tw-bg-opacity))}@media (min-width: 640px){.sm\:h-\[380px\]{height:380px}.sm\:flex-row{flex-direction:row}}@media (min-width: 768px){.md\:mx-16{margin-left:4rem;margin-right:4rem}.md\:h-\[335px\]{height:335px}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:rounded-\[80px\]{border-radius:80px}.md\:p-10{padding:2.5rem}.md\:p-8{padding:2rem}.md\:px-20{padding-left:5rem;padding-right:5rem}}@media (min-width: 1024px){.lg\:absolute{position:absolute}.lg\:top-\[105px\]{top:105px}.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:m-0{margin:0}.lg\:mb-28{margin-bottom:7rem}.lg\:mb-\[0\.4em\]{margin-bottom:.4em}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:h-\[695px\]{height:695px}.lg\:min-h-\[892px\]{min-height:892px}.lg\:grid-cols-\[1fr_1fr\]{grid-template-columns:1fr 1fr}.lg\:flex-row{flex-direction:row}.lg\:px-16{padding-left:4rem;padding-right:4rem}.lg\:px-20{padding-left:5rem;padding-right:5rem}.lg\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.lg\:py-12{padding-top:3rem;padding-bottom:3rem}.lg\:pt-0{padding-top:0}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width: 1280px){.xl\:mx-32{margin-left:8rem;margin-right:8rem}}.\[\&\>p\]\:text-\[\#404040\]>p{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}

```

Giving the thumb a minimum size should be a case of modifying the calculations here: https://github.com/LadybirdBrowser/ladybird/blob/bc20e3ac6c15c159f9901bd3babe3326450c5e3a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp#L266

The "off the screen" issue might be something else.

[OnorioCatenacci]

Since this is marked as a good first issue, I'll be happy to see what I can do with it.

[OnorioCatenacci]

I hate to ask on what seems like such a straightforward issue but rather than holding things up because I can't figure it out:

1.) I tried this on the master branch and I don't see the behavior of the very narrow thumb. I wanted to insure I could reproduce the issue so I could test my potential fix. I mean I've already come up with a fix but since I can't reproduce the behavior on master I don't trust my fix, of course.

2.) On the inspector dialog I only see DomTree and AccessibilityTree. But I checked--I've got the latest code. I did look at the build but I can't find anything to indicate a special switch to enable the stylesheet inspector.

Since I don't see the stylesheet inspector I'm a little bit leery of thinking I'm running my tests correctly.

[AtkinsSJ]

2.) On the inspector dialog I only see DomTree and AccessibilityTree. But I checked--I've got the latest code. I did look at the build but I can't find anything to indicate a special switch to enable the stylesheet inspector.

Since I don't see the stylesheet inspector I'm a little bit leery of thinking I'm running my tests correctly.

Oh, sorry - that's not been merged yet, I only submitted a PR for it yesterday. #1168 :sweat_smile:

The reduced test case I included here should be enough to test it though. I just tried it on master and it's still happening for me.

[OnorioCatenacci]

Ah! Thanks!

[OnorioCatenacci]

@AtkinsSJ I've submitted a PR for this but I believe I've bollixed up the PR. Sorry for the extra grief for what should be a trivial change. If you (or someone else) can give me some guidance as to how I can make the PR right that'd be greatly appreciated. And sorry for not reading the submission guidelines more closely.

[OnorioCatenacci]

Thanks for the assistance @AtkinsSJ. I've almost got it there but for some reason I've still managed to include one commit that shouldn't be included (so four files that I didn't change show up in the PR.) Thing is I can't see the commit that it appears to be in the git log. Regardless thanks for your patience and your help! I'm going to take one more crack at fixing this up.