Fix text size change affect settings popover width

This commit is contained in:
Lim Chee Aun 2024-10-09 17:14:45 +08:00
parent eea5b027c0
commit 9d06c88289
3 changed files with 81 additions and 72 deletions

142
src/locales/en.po generated
View file

@ -194,7 +194,7 @@ msgstr ""
#: src/pages/catchup.jsx:72 #: src/pages/catchup.jsx:72
#: src/pages/catchup.jsx:1447 #: src/pages/catchup.jsx:1447
#: src/pages/catchup.jsx:2068 #: src/pages/catchup.jsx:2068
#: src/pages/settings.jsx:1103 #: src/pages/settings.jsx:1110
msgid "Boosts" msgid "Boosts"
msgstr "" msgstr ""
@ -426,7 +426,7 @@ msgstr ""
#: src/pages/list.jsx:274 #: src/pages/list.jsx:274
#: src/pages/notifications.jsx:868 #: src/pages/notifications.jsx:868
#: src/pages/notifications.jsx:1082 #: src/pages/notifications.jsx:1082
#: src/pages/settings.jsx:69 #: src/pages/settings.jsx:76
#: src/pages/status.jsx:1256 #: src/pages/status.jsx:1256
msgid "Close" msgid "Close"
msgstr "" msgstr ""
@ -616,7 +616,7 @@ msgstr ""
#: src/components/compose.jsx:1170 #: src/components/compose.jsx:1170
#: src/components/status.jsx:93 #: src/components/status.jsx:93
#: src/pages/settings.jsx:297 #: src/pages/settings.jsx:304
msgid "Public" msgid "Public"
msgstr "" msgstr ""
@ -629,13 +629,13 @@ msgstr ""
#: src/components/compose.jsx:1179 #: src/components/compose.jsx:1179
#: src/components/status.jsx:95 #: src/components/status.jsx:95
#: src/pages/settings.jsx:300 #: src/pages/settings.jsx:307
msgid "Unlisted" msgid "Unlisted"
msgstr "" msgstr ""
#: src/components/compose.jsx:1182 #: src/components/compose.jsx:1182
#: src/components/status.jsx:96 #: src/components/status.jsx:96
#: src/pages/settings.jsx:303 #: src/pages/settings.jsx:310
msgid "Followers only" msgid "Followers only"
msgstr "" msgstr ""
@ -871,7 +871,7 @@ msgid "Error loading GIFs"
msgstr "" msgstr ""
#: src/components/drafts.jsx:63 #: src/components/drafts.jsx:63
#: src/pages/settings.jsx:684 #: src/pages/settings.jsx:691
msgid "Unsent drafts" msgid "Unsent drafts"
msgstr "" msgstr ""
@ -1251,7 +1251,7 @@ msgstr ""
#: src/pages/home.jsx:224 #: src/pages/home.jsx:224
#: src/pages/mentions.jsx:20 #: src/pages/mentions.jsx:20
#: src/pages/mentions.jsx:167 #: src/pages/mentions.jsx:167
#: src/pages/settings.jsx:1095 #: src/pages/settings.jsx:1102
#: src/pages/trending.jsx:381 #: src/pages/trending.jsx:381
msgid "Mentions" msgid "Mentions"
msgstr "" msgstr ""
@ -1306,7 +1306,7 @@ msgstr ""
#: src/pages/catchup.jsx:2062 #: src/pages/catchup.jsx:2062
#: src/pages/favourites.jsx:11 #: src/pages/favourites.jsx:11
#: src/pages/favourites.jsx:23 #: src/pages/favourites.jsx:23
#: src/pages/settings.jsx:1099 #: src/pages/settings.jsx:1106
msgid "Likes" msgid "Likes"
msgstr "" msgstr ""
@ -2298,7 +2298,7 @@ msgid "<0/> <1/> boosted"
msgstr "" msgstr ""
#: src/components/timeline.jsx:453 #: src/components/timeline.jsx:453
#: src/pages/settings.jsx:1123 #: src/pages/settings.jsx:1130
msgid "New posts" msgid "New posts"
msgstr "" msgstr ""
@ -3137,7 +3137,7 @@ msgid "{0, plural, one {Announcement} other {Announcements}}"
msgstr "" msgstr ""
#: src/pages/notifications.jsx:614 #: src/pages/notifications.jsx:614
#: src/pages/settings.jsx:1111 #: src/pages/settings.jsx:1118
msgid "Follow requests" msgid "Follow requests"
msgstr "" msgstr ""
@ -3308,240 +3308,240 @@ msgstr ""
msgid "Enter your search term or paste a URL above to get started." msgid "Enter your search term or paste a URL above to get started."
msgstr "" msgstr ""
#: src/pages/settings.jsx:74 #: src/pages/settings.jsx:81
msgid "Settings" msgid "Settings"
msgstr "" msgstr ""
#: src/pages/settings.jsx:83 #: src/pages/settings.jsx:90
msgid "Appearance" msgid "Appearance"
msgstr "" msgstr ""
#: src/pages/settings.jsx:159 #: src/pages/settings.jsx:166
msgid "Light" msgid "Light"
msgstr "" msgstr ""
#: src/pages/settings.jsx:170 #: src/pages/settings.jsx:177
msgid "Dark" msgid "Dark"
msgstr "" msgstr ""
#: src/pages/settings.jsx:183 #: src/pages/settings.jsx:190
msgid "Auto" msgid "Auto"
msgstr "" msgstr ""
#: src/pages/settings.jsx:193 #: src/pages/settings.jsx:200
msgid "Text size" msgid "Text size"
msgstr "" msgstr ""
#. Preview of one character, in smallest size #. Preview of one character, in smallest size
#. Preview of one character, in largest size #. Preview of one character, in largest size
#: src/pages/settings.jsx:198 #: src/pages/settings.jsx:205
#: src/pages/settings.jsx:223 #: src/pages/settings.jsx:230
msgid "A" msgid "A"
msgstr "" msgstr ""
#: src/pages/settings.jsx:237 #: src/pages/settings.jsx:244
msgid "Display language" msgid "Display language"
msgstr "" msgstr ""
#: src/pages/settings.jsx:246 #: src/pages/settings.jsx:253
msgid "Volunteer translations" msgid "Volunteer translations"
msgstr "Volunteer translations" msgstr "Volunteer translations"
#: src/pages/settings.jsx:257 #: src/pages/settings.jsx:264
msgid "Posting" msgid "Posting"
msgstr "" msgstr ""
#: src/pages/settings.jsx:264 #: src/pages/settings.jsx:271
msgid "Default visibility" msgid "Default visibility"
msgstr "" msgstr ""
#: src/pages/settings.jsx:265 #: src/pages/settings.jsx:272
#: src/pages/settings.jsx:311 #: src/pages/settings.jsx:318
msgid "Synced" msgid "Synced"
msgstr "" msgstr ""
#: src/pages/settings.jsx:290 #: src/pages/settings.jsx:297
msgid "Failed to update posting privacy" msgid "Failed to update posting privacy"
msgstr "" msgstr ""
#: src/pages/settings.jsx:313 #: src/pages/settings.jsx:320
msgid "Synced to your instance server's settings. <0>Go to your instance ({instance}) for more settings.</0>" msgid "Synced to your instance server's settings. <0>Go to your instance ({instance}) for more settings.</0>"
msgstr "" msgstr ""
#: src/pages/settings.jsx:328 #: src/pages/settings.jsx:335
msgid "Experiments" msgid "Experiments"
msgstr "" msgstr ""
#: src/pages/settings.jsx:341 #: src/pages/settings.jsx:348
msgid "Auto refresh timeline posts" msgid "Auto refresh timeline posts"
msgstr "" msgstr ""
#: src/pages/settings.jsx:353 #: src/pages/settings.jsx:360
msgid "Boosts carousel" msgid "Boosts carousel"
msgstr "" msgstr ""
#: src/pages/settings.jsx:369 #: src/pages/settings.jsx:376
msgid "Post translation" msgid "Post translation"
msgstr "" msgstr ""
#: src/pages/settings.jsx:380 #: src/pages/settings.jsx:387
msgid "Translate to" msgid "Translate to"
msgstr "" msgstr ""
#: src/pages/settings.jsx:391 #: src/pages/settings.jsx:398
msgid "System language ({systemTargetLanguageText})" msgid "System language ({systemTargetLanguageText})"
msgstr "" msgstr ""
#: src/pages/settings.jsx:417 #: src/pages/settings.jsx:424
msgid "{0, plural, =0 {Hide \"Translate\" button for:} other {Hide \"Translate\" button for (#):}}" msgid "{0, plural, =0 {Hide \"Translate\" button for:} other {Hide \"Translate\" button for (#):}}"
msgstr "" msgstr ""
#: src/pages/settings.jsx:471 #: src/pages/settings.jsx:478
msgid "Note: This feature uses external translation services, powered by <0>Lingva API</0> & <1>Lingva Translate</1>." msgid "Note: This feature uses external translation services, powered by <0>Lingva API</0> & <1>Lingva Translate</1>."
msgstr "" msgstr ""
#: src/pages/settings.jsx:505 #: src/pages/settings.jsx:512
msgid "Auto inline translation" msgid "Auto inline translation"
msgstr "" msgstr ""
#: src/pages/settings.jsx:509 #: src/pages/settings.jsx:516
msgid "Automatically show translation for posts in timeline. Only works for <0>short</0> posts without content warning, media and poll." msgid "Automatically show translation for posts in timeline. Only works for <0>short</0> posts without content warning, media and poll."
msgstr "" msgstr ""
#: src/pages/settings.jsx:529 #: src/pages/settings.jsx:536
msgid "GIF Picker for composer" msgid "GIF Picker for composer"
msgstr "" msgstr ""
#: src/pages/settings.jsx:533 #: src/pages/settings.jsx:540
msgid "Note: This feature uses external GIF search service, powered by <0>GIPHY</0>. G-rated (suitable for viewing by all ages), tracking parameters are stripped, referrer information is omitted from requests, but search queries and IP address information will still reach their servers." msgid "Note: This feature uses external GIF search service, powered by <0>GIPHY</0>. G-rated (suitable for viewing by all ages), tracking parameters are stripped, referrer information is omitted from requests, but search queries and IP address information will still reach their servers."
msgstr "" msgstr ""
#: src/pages/settings.jsx:562 #: src/pages/settings.jsx:569
msgid "Image description generator" msgid "Image description generator"
msgstr "" msgstr ""
#: src/pages/settings.jsx:567 #: src/pages/settings.jsx:574
msgid "Only for new images while composing new posts." msgid "Only for new images while composing new posts."
msgstr "" msgstr ""
#: src/pages/settings.jsx:574 #: src/pages/settings.jsx:581
msgid "Note: This feature uses external AI service, powered by <0>img-alt-api</0>. May not work well. Only for images and in English." msgid "Note: This feature uses external AI service, powered by <0>img-alt-api</0>. May not work well. Only for images and in English."
msgstr "" msgstr ""
#: src/pages/settings.jsx:600 #: src/pages/settings.jsx:607
msgid "Server-side grouped notifications" msgid "Server-side grouped notifications"
msgstr "" msgstr ""
#: src/pages/settings.jsx:604 #: src/pages/settings.jsx:611
msgid "Alpha-stage feature. Potentially improved grouping window but basic grouping logic." msgid "Alpha-stage feature. Potentially improved grouping window but basic grouping logic."
msgstr "" msgstr ""
#: src/pages/settings.jsx:625 #: src/pages/settings.jsx:632
msgid "\"Cloud\" import/export for shortcuts settings" msgid "\"Cloud\" import/export for shortcuts settings"
msgstr "" msgstr ""
#: src/pages/settings.jsx:630 #: src/pages/settings.jsx:637
msgid "⚠️⚠️⚠️ Very experimental.<0/>Stored in your own profiles notes. Profile (private) notes are mainly used for other profiles, and hidden for own profile." msgid "⚠️⚠️⚠️ Very experimental.<0/>Stored in your own profiles notes. Profile (private) notes are mainly used for other profiles, and hidden for own profile."
msgstr "" msgstr ""
#: src/pages/settings.jsx:641 #: src/pages/settings.jsx:648
msgid "Note: This feature uses currently-logged-in instance server API." msgid "Note: This feature uses currently-logged-in instance server API."
msgstr "" msgstr ""
#: src/pages/settings.jsx:658 #: src/pages/settings.jsx:665
msgid "Cloak mode <0>(<1>Text</1> → <2>████</2>)</0>" msgid "Cloak mode <0>(<1>Text</1> → <2>████</2>)</0>"
msgstr "" msgstr ""
#: src/pages/settings.jsx:667 #: src/pages/settings.jsx:674
msgid "Replace text as blocks, useful when taking screenshots, for privacy reasons." msgid "Replace text as blocks, useful when taking screenshots, for privacy reasons."
msgstr "" msgstr ""
#: src/pages/settings.jsx:692 #: src/pages/settings.jsx:699
msgid "About" msgid "About"
msgstr "" msgstr ""
#: src/pages/settings.jsx:731 #: src/pages/settings.jsx:738
msgid "<0>Built</0> by <1>@cheeaun</1>" msgid "<0>Built</0> by <1>@cheeaun</1>"
msgstr "" msgstr ""
#: src/pages/settings.jsx:760 #: src/pages/settings.jsx:767
msgid "Sponsor" msgid "Sponsor"
msgstr "" msgstr ""
#: src/pages/settings.jsx:768 #: src/pages/settings.jsx:775
msgid "Donate" msgid "Donate"
msgstr "" msgstr ""
#: src/pages/settings.jsx:776 #: src/pages/settings.jsx:783
msgid "Privacy Policy" msgid "Privacy Policy"
msgstr "" msgstr ""
#: src/pages/settings.jsx:783 #: src/pages/settings.jsx:790
msgid "<0>Site:</0> {0}" msgid "<0>Site:</0> {0}"
msgstr "" msgstr ""
#: src/pages/settings.jsx:790 #: src/pages/settings.jsx:797
msgid "<0>Version:</0> <1/> {0}" msgid "<0>Version:</0> <1/> {0}"
msgstr "" msgstr ""
#: src/pages/settings.jsx:805 #: src/pages/settings.jsx:812
msgid "Version string copied" msgid "Version string copied"
msgstr "" msgstr ""
#: src/pages/settings.jsx:808 #: src/pages/settings.jsx:815
msgid "Unable to copy version string" msgid "Unable to copy version string"
msgstr "" msgstr ""
#: src/pages/settings.jsx:1008 #: src/pages/settings.jsx:1015
#: src/pages/settings.jsx:1013 #: src/pages/settings.jsx:1020
msgid "Failed to update subscription. Please try again." msgid "Failed to update subscription. Please try again."
msgstr "" msgstr ""
#: src/pages/settings.jsx:1019 #: src/pages/settings.jsx:1026
msgid "Failed to remove subscription. Please try again." msgid "Failed to remove subscription. Please try again."
msgstr "" msgstr ""
#: src/pages/settings.jsx:1026 #: src/pages/settings.jsx:1033
msgid "Push Notifications (beta)" msgid "Push Notifications (beta)"
msgstr "" msgstr ""
#: src/pages/settings.jsx:1048 #: src/pages/settings.jsx:1055
msgid "Push notifications are blocked. Please enable them in your browser settings." msgid "Push notifications are blocked. Please enable them in your browser settings."
msgstr "" msgstr ""
#: src/pages/settings.jsx:1057 #: src/pages/settings.jsx:1064
msgid "Allow from <0>{0}</0>" msgid "Allow from <0>{0}</0>"
msgstr "" msgstr ""
#: src/pages/settings.jsx:1066 #: src/pages/settings.jsx:1073
msgid "anyone" msgid "anyone"
msgstr "" msgstr ""
#: src/pages/settings.jsx:1070 #: src/pages/settings.jsx:1077
msgid "people I follow" msgid "people I follow"
msgstr "" msgstr ""
#: src/pages/settings.jsx:1074 #: src/pages/settings.jsx:1081
msgid "followers" msgid "followers"
msgstr "" msgstr ""
#: src/pages/settings.jsx:1107 #: src/pages/settings.jsx:1114
msgid "Follows" msgid "Follows"
msgstr "" msgstr ""
#: src/pages/settings.jsx:1115 #: src/pages/settings.jsx:1122
msgid "Polls" msgid "Polls"
msgstr "" msgstr ""
#: src/pages/settings.jsx:1119 #: src/pages/settings.jsx:1126
msgid "Post edits" msgid "Post edits"
msgstr "" msgstr ""
#: src/pages/settings.jsx:1140 #: src/pages/settings.jsx:1147
msgid "Push permission was not granted since your last login. You'll need to <0><1>log in</1> again to grant push permission</0>." msgid "Push permission was not granted since your last login. You'll need to <0><1>log in</1> again to grant push permission</0>."
msgstr "" msgstr ""
#: src/pages/settings.jsx:1156 #: src/pages/settings.jsx:1163
msgid "NOTE: Push notifications only work for <0>one account</0>." msgid "NOTE: Push notifications only work for <0>one account</0>."
msgstr "" msgstr ""

View file

@ -1,5 +1,7 @@
#settings-container { #settings-container {
background-color: var(--bg-faded-color); background-color: var(--bg-faded-color);
/* Prevent immediate text size change affecting max width */
max-width: calc(40 * var(--current-text-size) - 50px - 16px);
} }
#settings-container main h3 { #settings-container main h3 {

View file

@ -63,7 +63,14 @@ function Settings({ onClose }) {
// }, []); // }, []);
return ( return (
<div id="settings-container" class="sheet" tabIndex="-1"> <div
id="settings-container"
class="sheet"
tabIndex="-1"
style={{
'--current-text-size': `${currentTextSize}px`,
}}
>
{!!onClose && ( {!!onClose && (
<button type="button" class="sheet-close" onClick={onClose}> <button type="button" class="sheet-close" onClick={onClose}>
<Icon icon="x" alt={t`Close`} /> <Icon icon="x" alt={t`Close`} />