[Bug]: Missing scrollbar on extra networks tabs with tree view enabled

thatfuckingbird commented 5 months ago

Checklist

[X] The issue exists after disabling all extensions
[X] The issue exists on a clean installation of webui
[ ] The issue is caused by an extension, but I believe it is caused by a bug in the webui
[X] The issue exists in the current version of the webui
[X] The issue has not been reported before recently
[ ] The issue has been reported before but has not been fixed yet

What happened?

I have lots of Loras in various subfolders. With the dir view enabled ("Extra Networks directory view style" is set to dirs), the folder names fill up the entire available space on the Loras tab and get cut off. Folder names that don't fit on the screen get cut off and the lora thumbnails aren't visible either. I can drag the resize handle down until all the folders, and the thumbnails below them are visible but this is cumbersome compared to the previous behavior.

I think this broke when the resize handle was introduced and the extra-network-pane divs were switched to flexbox. I'm not good enough with CSS to fix this but removing the height: calc(100vh - 24rem); rule from .extra-network-pane in style.css alleviates the problem by making the extra networks pane big enough that all content fits without scrolling (but this is probably not ideal either since it can get very large).

Edit: edited the title of the issue and the description above to clarify that this happens only when "Extra Networks directory view style" is set to dirs. Tree view is fine.

Steps to reproduce the problem

Have lots of Loras sorted into many folders (enough that the list of folders doesn't fit on a single screen on the Lora tab)
Go to Lora tab
Observe that list of folders is cut off, thumbnails below the folder list are not visible

What should have happened?

Either the list of folders should be big enough so no folders are cut off or there should be a scrollbar. The thumbnails should be visible below the list of folders even if the list of folders takes up more than a screen.

What browsers do you use to access the UI ?

Brave

Sysinfo

sysinfo.txt

Console logs

not relevant, it's a CSS styling issue

Additional information

No response

Ashteroide commented 4 months ago

I'm experiencing the same issue

Version version: [v1.9.0] • python: 3.10.6 • torch: 2.1.2+cu121 • xformers: 0.0.23.post1 • gradio: 3.41.2

Browser: Firefox CPU: arch: AMD64 cpu: AMD64 Family 25 Model 33 Stepping 2, AuthenticAMD system: Windows release: Windows-10-10.0.19045-SP0 python: 3.10.6

GPU: NVIDIA GeForce RTX 3060 (1) (sm_90) (8, 6) cuda: 12.1 cudnn: 8801 driver: 552.12

Recently updated to ensure I was getting any fixes as I was having issues with CUDA memory errors (false, I had plenty of VRAM)

UPDATE: If you have stable-diffusion-webui-forge enabled I've sourced it to be the issue, not really sure how that'll affect your generations performance wise but with it enabled and my other extensions gone through and enabled one by one this seems to be the culprit

Sj-Si commented 4 months ago

@thatfuckingbird @Ashteroide

If you're on the dev branch then add this to the end of your ./style.css to tide you over until a patch is released with these changes. Unsure of when that may be. It may also work on the master branch but I haven't tested it. If anything it may just need extra-network-dirs changed to whatever the actual flex container's class name is.

.extra-network-dirs {
    flex: 0 1 min-content;
    flex-flow: row wrap;
    max-height: 20%;
    gap: var(--spacing-sm);
    overflow: clip auto;
    border: 1px solid var(--block-border-color);
    padding: var(--spacing-md);
}

If you're on a chromium based browser and want a prettier scrollbar then add this as well:

.extra-network-dirs::-webkit-scrollbar {
    background-color: transparent;
    width: 16px;
}

.extra-network-dirs::-webkit-scrollbar-track {
    background-color: transparent;
    background-clip: content-box;
}

.extra-network-dirs::-webkit-scrollbar-thumb {
    background-color: var(--border-color-primary);
    border-radius: 16px;
    border: 4px solid var(--background-fill-primary);
}

.extra-network-dirs::-webkit-scrollbar-button {
    display: none;
}

Sorry the styled scrollbar doesn't work on firefox. They for some reason don't allow any real styling of scrollbars. You can still add this code if you're on firefox and it won't break anything, it just won't do anything either...

Ashteroide commented 4 months ago

@Sj-Si Cheers for the fix for others having the issue, but yeah doesn't work on Firefox, it's not much of a bother to just disable forge anyway considering I have a capable GPU, but for people trying to get better optimisation from a lower end card they'll have to decide, or switch browsers.

Sj-Si commented 4 months ago

@Sj-Si Cheers for the fix for others having the issue, but yeah doesn't work on Firefox, it's not much of a bother to just disable forge anyway considering I have a capable GPU, but for people trying to get better optimisation from a lower end card they'll have to decide, or switch browsers.

Wait. This fix doesn't work at all for firefox? Or do you have a scrollbar but it just looks ugly on firefox?

Ashteroide commented 4 months ago

@Sj-Si Whoops! Got it mixed up haha yes it's working

AUTOMATIC1111 / stable-diffusion-webui