From 29f8728b340352c17715d1250d2a60aa142ce380 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Mon, 18 Sep 2023 17:37:31 -0500 Subject: [PATCH 1/8] Implement fix to elements escaping container on Channel page at small widths --- src/renderer/views/Channel/Channel.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index 64b02e3efde66..c15368857556d 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/src/renderer/views/Channel/Channel.css @@ -197,7 +197,30 @@ .tabs { overflow-x: scroll; } + #communityPanel { margin-block-start: 1rem; } } + +@media only screen and (max-width: 400px) { + .channelInfo { + justify-content: center; + gap: 10px; + } + + .channelInfoActionsContainer { + flex-direction: column-reverse; + } + + .thumbnailContainer { + flex-direction: column; + } + + .thumbnailContainer, .channelInfoActionsContainer { + flex-wrap: wrap; + align-items: center; + text-align: center; + gap: 10px; + } +} From 2796baeafa0dd8205ea10a36a17c5b4e695b5d0b Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Mon, 18 Sep 2023 17:45:28 -0500 Subject: [PATCH 2/8] Show all Channel tabs on smaller viewport widths & reduce bulky gap --- src/renderer/views/Channel/Channel.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index c15368857556d..c57b6b43f7101 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/src/renderer/views/Channel/Channel.css @@ -187,6 +187,7 @@ .channelInfoTabs { block-size: auto; flex-flow: column-reverse; + gap: 0; } .channelSearch { @@ -195,7 +196,8 @@ } .tabs { - overflow-x: scroll; + flex: 1 1 0; + flex-wrap: wrap; } #communityPanel { From a1da09af2a2c244a3985f7e38ec81eb4dc2d2f85 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Tue, 19 Sep 2023 07:50:45 -0500 Subject: [PATCH 3/8] Update Channel page to not break at even lower sizes --- src/renderer/views/Channel/Channel.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index c57b6b43f7101..58ba840128b03 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/src/renderer/views/Channel/Channel.css @@ -226,3 +226,9 @@ gap: 10px; } } + +@media only screen and (max-width: 260px) { + .channelDetails { + max-inline-size: none; + } +} From a4d8e82f361f9f92a72277bbc1ce1f8d11e033ad Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 20 Sep 2023 17:32:03 -0500 Subject: [PATCH 4/8] Re-introduce channel button clipping fix --- src/renderer/views/Channel/Channel.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index 58ba840128b03..aa16078224894 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/src/renderer/views/Channel/Channel.css @@ -71,6 +71,10 @@ justify-content: space-between; } +.subscribeButton { + block-size: fit-content; +} + .shareIcon { align-self: center; } From b72db70f8dd42fb4c9ba0a8d81a0ffd78cd4d47b Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 20 Sep 2023 17:39:11 -0500 Subject: [PATCH 5/8] Implement updated share button styling --- .../ft-share-button/ft-share-button.scss | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/renderer/components/ft-share-button/ft-share-button.scss b/src/renderer/components/ft-share-button/ft-share-button.scss index be150d7dbdf8b..7e5491b0ab0fb 100644 --- a/src/renderer/components/ft-share-button/ft-share-button.scss +++ b/src/renderer/components/ft-share-button/ft-share-button.scss @@ -16,9 +16,12 @@ .buttons { display: flex; flex-direction: column; + max-inline-size: min-content; + min-inline-size: 150px; .action { padding: 6px; + white-space: initial; } } @@ -85,3 +88,30 @@ } } } + +@media only screen and (max-width: 450px) { + + .shareLinks { + grid-auto-flow: row; + margin-inline: auto; + justify-items: center; + + + .header { + inline-size: fit-content; + + &.invidious { + margin-block-start: 20px; + } + } + + .buttons { + max-inline-size: min-content; + inline-size: max-content; + } + + .divider { + display: none; + } + } +} From a5649f1c5788eef509d4b5c5d45d666afd8798b1 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 20 Sep 2023 19:02:04 -0500 Subject: [PATCH 6/8] Fix issue with prompt box shrinking on small enough viewport sizes / overflow --- src/renderer/components/ft-prompt/ft-prompt.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css index 2d59ded02dd70..e17beffab8e6d 100644 --- a/src/renderer/components/ft-prompt/ft-prompt.css +++ b/src/renderer/components/ft-prompt/ft-prompt.css @@ -2,8 +2,8 @@ position: fixed; inset-block-start: 0px; inset-inline-start: 0px; - inline-size: 100vw; - block-size: 100vh; + inline-size: 100%; + block-size: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 10; padding: 15px; @@ -13,6 +13,10 @@ justify-content: center; } +.promptCard { + overflow-y: scroll; +} + .promptCard.autosize { box-sizing: border-box; margin-block: 0; From 2c7ec5925ed6acbde244a1119a3436aca5d97209 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 20 Sep 2023 19:03:06 -0500 Subject: [PATCH 7/8] Update share button to work at all sizes' --- .../ft-share-button/ft-share-button.scss | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/renderer/components/ft-share-button/ft-share-button.scss b/src/renderer/components/ft-share-button/ft-share-button.scss index 7e5491b0ab0fb..cfccc6a6bf3e1 100644 --- a/src/renderer/components/ft-share-button/ft-share-button.scss +++ b/src/renderer/components/ft-share-button/ft-share-button.scss @@ -11,6 +11,8 @@ font-weight: bold; margin-block: 4px 8px; margin-inline: 0; + display: flex; + justify-content: center; } .buttons { @@ -58,8 +60,6 @@ } .invidious { - display: flex; - justify-content: center; letter-spacing: -0.4px; .invidiousLogo { @@ -90,24 +90,19 @@ } @media only screen and (max-width: 450px) { - .shareLinks { grid-auto-flow: row; margin-inline: auto; justify-items: center; + max-inline-size: max-content; - - .header { - inline-size: fit-content; - - &.invidious { - margin-block-start: 20px; - } + .header.invidious { + margin-block-start: 20px; } .buttons { max-inline-size: min-content; - inline-size: max-content; + min-inline-size: 180px; } .divider { From 921c92116c89394d4ea01a98a4f80797744526b1 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Wed, 20 Sep 2023 19:14:40 -0500 Subject: [PATCH 8/8] Fix pre-existing issue of Channel tabs overflowing on desktop view in some locales --- src/renderer/views/Channel/Channel.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css index aa16078224894..0c7ef0adfbf0d 100644 --- a/src/renderer/views/Channel/Channel.css +++ b/src/renderer/views/Channel/Channel.css @@ -98,11 +98,14 @@ gap: 32px; padding-block: .3em; padding-inline: 0; + flex-direction: column; + flex-wrap: nowrap; } .tabs { display: flex; flex: 0 1 33%; + flex-wrap: wrap; } .tab {