From 87689b201eb7f2f45c7eb1e5aecfe3b578cff048 Mon Sep 17 00:00:00 2001 From: IRHM <37304121+IRHM@users.noreply.github.com> Date: Fri, 4 Oct 2024 02:24:02 +0100 Subject: [PATCH 1/2] Poster: Let title/overview overflow with scroll --- src/lib/poster/GamePoster.svelte | 3 ++- src/lib/poster/Poster.svelte | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/lib/poster/GamePoster.svelte b/src/lib/poster/GamePoster.svelte index 6e129798..857a1616 100644 --- a/src/lib/poster/GamePoster.svelte +++ b/src/lib/poster/GamePoster.svelte @@ -207,7 +207,7 @@ role="button" tabindex="-1" > - +

{title} {#if year} @@ -329,6 +329,7 @@ & > a { height: 100%; + overflow: auto; } h2 { diff --git a/src/lib/poster/Poster.svelte b/src/lib/poster/Poster.svelte index 2048ac35..b372d345 100644 --- a/src/lib/poster/Poster.svelte +++ b/src/lib/poster/Poster.svelte @@ -175,7 +175,7 @@ role="button" tabindex="-1" > - +

{title} {#if year} @@ -277,6 +277,7 @@ & > a { height: 100%; + overflow: auto; } h2 { From 46a043e5b94e973e378ba802905396f339ce27ae Mon Sep 17 00:00:00 2001 From: IRHM <37304121+IRHM@users.noreply.github.com> Date: Fri, 4 Oct 2024 03:05:51 +0100 Subject: [PATCH 2/2] Fix .small-scrollbar style for chromium .small-scrollbar is used on poster rating/status lists, but wasn't working because we also have the `scrollbar-width` property set, so now if the browser supports the webkit scrollbar styling, we will prefer that over scrollbar-width. Don't know if this will break safari or whatever but hell if ima download that. firefox scrollbar looks nice and this will let us keep using scrollbar-width: small wherever we want for that sweet smol bar action in ff --- src/norm.scss | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/src/norm.scss b/src/norm.scss index 83646766..56013643 100644 --- a/src/norm.scss +++ b/src/norm.scss @@ -253,18 +253,27 @@ } .small-scrollbar { - &::-webkit-scrollbar { - width: 4.5px; - } + @supports selector(::-webkit-scrollbar) { + &::-webkit-scrollbar { + width: 4.5px; + } - &::-webkit-scrollbar-track { - background: transparent; - } + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba(155, 155, 155, 0.5); + border-radius: 20px; + border: transparent; + } - &::-webkit-scrollbar-thumb { - background-color: rgba(155, 155, 155, 0.5); - border-radius: 20px; - border: transparent; + // The scrollbar-width property will always override + // -webkit-scrollbar, but since the scrollbars in + // chromium look ugly af, we will try to unset scrollbar-width + // in these cases and use our manual styling instead to try + // mimicking beatiful firefox. + scrollbar-width: auto !important; } } }