Fix settings layout issues after the Vue 3 migration - #8292
Merged
Conversation
absidue
requested review from
a user,
MarmadileManteater,
PikachuEXE,
efb4f5ff-1298-471a-8973-3d47447115dc and
kommunarr
November 16, 2025 13:37
FreeTubeBot
enabled auto-merge (squash)
November 16, 2025 13:37
github-actions
Bot
added
the
PR: waiting for review
7 tasks
PikachuEXE
approved these changes
Nov 17, 2025
ghost
approved these changes
Nov 17, 2025
efb4f5ff-1298-471a-8973-3d47447115dc
approved these changes
Nov 17, 2025
github-actions
Bot
removed
the
PR: waiting for review
PikachuEXE
added a commit
to PikachuEXE/FreeTube
that referenced
this pull request
Nov 18, 2025
* development: (22 commits) Workaround ready-to-show not firing consistently on wayland (FreeTubeApp#8294) Bump electron from 38.4.0 to 39.2.1 (FreeTubeApp#8303) Migrate the WatchVideoInfo component to the composition API (FreeTubeApp#8295) Translated using Weblate (Hungarian) Translated using Weblate (Norwegian Bokmål) Translated using Weblate (French) Bump eslint-plugin-jsdoc from 61.1.12 to 61.2.1 in the eslint group (FreeTubeApp#8298) Replace broken trending with a local API only equivalent (FreeTubeApp#8289) Fix settings layout issues after the Vue 3 migration (FreeTubeApp#8292) Bump lefthook from 2.0.3 to 2.0.4 (FreeTubeApp#8299) Bump shaka-player from 4.16.8 to 4.16.9 (FreeTubeApp#8301) Bump electron-builder from 26.1.0 to 26.2.0 (FreeTubeApp#8302) Fix playlist video view counts on the local API (FreeTubeApp#8290) change hardcoded color app text logoColor (FreeTubeApp#8288) Translated using Weblate (Russian) Translated using Weblate (German) wrap long playlist strings (FreeTubeApp#8275) Translated using Weblate (Bulgarian) Bump js-yaml from 4.1.0 to 4.1.1 (FreeTubeApp#8284) bump workflows node-version to 24 (FreeTubeApp#8279) ... # Conflicts: # src/renderer/helpers/api/invidious.js
PikachuEXE
added a commit
to PikachuEXE/FreeTube
that referenced
this pull request
Nov 18, 2025
* development: Translated using Weblate (Chinese (Simplified Han script)) Workaround ready-to-show not firing consistently on wayland (FreeTubeApp#8294) Bump electron from 38.4.0 to 39.2.1 (FreeTubeApp#8303) Migrate the WatchVideoInfo component to the composition API (FreeTubeApp#8295) Translated using Weblate (Hungarian) Translated using Weblate (Norwegian Bokmål) Translated using Weblate (French) Bump eslint-plugin-jsdoc from 61.1.12 to 61.2.1 in the eslint group (FreeTubeApp#8298) Replace broken trending with a local API only equivalent (FreeTubeApp#8289) Fix settings layout issues after the Vue 3 migration (FreeTubeApp#8292) Bump lefthook from 2.0.3 to 2.0.4 (FreeTubeApp#8299) Bump shaka-player from 4.16.8 to 4.16.9 (FreeTubeApp#8301) Bump electron-builder from 26.1.0 to 26.2.0 (FreeTubeApp#8302) # Conflicts: # src/renderer/helpers/api/local.js
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request Type
Related issue
Description
This pull request fixes various layout issues on the settings page after the Vue 3 upgrade. The issue with the tooltips hugging the switch labels was caused by Vue 3 being more aggressive with its whitespace collapsing, I have added a 5px margin in between to solve it. The other issues were caused by us relying on bugs in Vue's scoped CSS feature with the handling of nested styles that caused styles to leak into other components, I have explicitly marked those sections with
:deep(). The latter probably wouldn't have been an issue if we weren't using SCSS and nesting.Testing
Open the settings page and check that it looks like the before screenshots in the linked issue.
Desktop