Skip to content

Commit

Permalink
Fix overflow issue with share playlist icon drop-down (#4677)
Browse files Browse the repository at this point in the history
* Set share playlist dropdown position to `center` w/ media query

* Remove overflow-y as it causes the overflow issue

Originally, when this overflow-y was added, the share playlist dropdown went straight down, so there would no need for the content to be able to overflow in the y direction. (#2281)

Now, the dropdown swings out to the left by default, and even when it is centered, it still overflows the width of the container as an intentional part of the design.

* Remove unnecessary whitespace
  • Loading branch information
MarmadileManteater authored Feb 15, 2024
1 parent c15f286 commit 821d5ca
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 1 deletion.
7 changes: 7 additions & 0 deletions src/renderer/components/playlist-info/playlist-info.scss
Original file line number Diff line number Diff line change
Expand Up @@ -72,3 +72,10 @@
column-gap: 8px;
justify-content: flex-end;
}

@media only screen and (max-width: 1250px) {
:deep(.sharePlaylistIcon .iconDropdown) {
inset-inline-start: auto;
inset-inline-end: auto;
}
}
1 change: 1 addition & 0 deletions src/renderer/components/playlist-info/playlist-info.vue
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@
<ft-share-button
v-if="sharePlaylistButtonVisible"
:id="id"
class="sharePlaylistIcon"
:dropdown-position-y="description ? 'top' : 'bottom'"
share-target-type="Playlist"
/>
Expand Down
1 change: 0 additions & 1 deletion src/renderer/views/Playlist/Playlist.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
box-sizing: border-box;
block-size: calc(100vh - 132px);
margin-inline-end: 1em;
overflow-y: auto;
padding: 10px;
position: sticky;
inset-block-start: 96px;
Expand Down

0 comments on commit 821d5ca

Please sign in to comment.