Improve PlaylistModal layout and dropdown visibility
- Make "Adding n tracks" inline with "Choose playlist" label - Add min-height 400px for addTrack mode modal - Fix dropdown being clipped by modal: overflow visible + z-index 10001 - Dropdown can now extend outside modal boundaries
This commit is contained in:
1 parent
c190fe79b0
commit
81ffc120ad
1 file changed
+32
-9
@@ -536,12 +536,13 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if mode === 'addTrack'}
|
{#if mode === 'addTrack'}
|
||||||
<div class="track-info">
|
|
||||||
Adding {trackIds.length} {isLocalTracks ? 'local ' : ''}track{trackIds.length !== 1 ? 's' : ''}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="playlist-search">Choose playlist</label>
|
<div class="label-row">
|
||||||
|
<label for="playlist-search">Choose playlist</label>
|
||||||
|
<span class="track-info-inline">
|
||||||
|
Adding {trackIds.length} {isLocalTracks ? 'local ' : ''}track{trackIds.length !== 1 ? 's' : ''}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<div class="playlist-dropdown" bind:this={dropdownRef}>
|
<div class="playlist-dropdown" bind:this={dropdownRef}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@@ -746,7 +747,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 490px;
|
max-width: 490px;
|
||||||
max-height: 90vh;
|
max-height: 90vh;
|
||||||
overflow: hidden;
|
overflow: visible;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: var(--bg-secondary);
|
background: var(--bg-secondary);
|
||||||
@@ -755,6 +756,11 @@
|
|||||||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Taller modal for addTrack mode */
|
||||||
|
.modal:has(.label-row) {
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -785,7 +791,8 @@
|
|||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
overflow-y: auto;
|
overflow: visible;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
@@ -807,6 +814,22 @@
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-row label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-info-inline {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
@@ -904,8 +927,8 @@
|
|||||||
background: var(--bg-secondary);
|
background: var(--bg-secondary);
|
||||||
border: 1px solid var(--bg-tertiary);
|
border: 1px solid var(--bg-tertiary);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||||
z-index: 100;
|
z-index: 10001;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlist-dropdown-item {
|
.playlist-dropdown-item {
|
||||||
|
|||||||
Reference in new issue
Block a user