From d4cac8369439c584520d4c4e9e414c30fafbab80 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Mon, 18 Sep 2023 09:24:02 -0500 Subject: [PATCH 1/2] Fix buttons intersecting on Subscribed Channels tab in many languages Note that this can still occur if one of the words in 'Unsubscribe' is pretty big on smaller screen sizes, e.g., Svenska at 515px. This is because we allow the Unsubscribe button to be wider than the element itself, which is hard to change here without completely reworking the structure using (due to limitations with minmax being unable to have fit-content in a grid definition). --- .../components/ft-subscribe-button/ft-subscribe-button.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css index 338ea7b3538c1..d0e74c3ebb2fc 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css @@ -1,6 +1,7 @@ -.subscribeButton { +.subscribeButton.btn { align-self: center; block-size: 50%; margin-block-end: 10px; min-inline-size: 150px; + white-space: initial; } From 7b9f75159dc41674350b110506dd1b41343c1c3d Mon Sep 17 00:00:00 2001 From: Jason <84899178+jasonhenriquez@users.noreply.github.com> Date: Tue, 19 Sep 2023 02:01:40 +0000 Subject: [PATCH 2/2] Update src/renderer/components/ft-subscribe-button/ft-subscribe-button.css Co-authored-by: PikachuEXE --- .../components/ft-subscribe-button/ft-subscribe-button.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css index d0e74c3ebb2fc..4d2871b3326e9 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css @@ -1,3 +1,4 @@ +/* Ensures style here overrides style of .btn */ .subscribeButton.btn { align-self: center; block-size: 50%;