nucleo000/RepoDructor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI mejorada

Browse Source
This commit is contained in:
josedario87
2025-08-10 00:45:59 -06:00
parent 2f878a857a
commit 493d236dc4
8 changed files with 56 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/MainContainer.client.vue
View File

@@ -56,7 +56,15 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
<style scoped>
.main-container {
height: 90vh;
/* Parametrized viewport sizing */
--app-vertical-margin: 10px; /* Top/bottom margin between both components */
--playback-controls-height: 60px; /* Adjustable height for PlaybackControls */
--tracklist-height: calc(100vh - (var(--app-vertical-margin) * 2) - var(--playback-controls-height));
/* Container takes full viewport minus vertical margins */
height: calc(100vh - (var(--app-vertical-margin) * 2));
margin-top: var(--app-vertical-margin);
margin-bottom: var(--app-vertical-margin);
display: flex;
flex-direction: column;
max-width: 1200px;
@@ -64,7 +72,9 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
padding: 20px;
padding-bottom: 0;
position: relative;
overflow: hidden;
/* Keep shadows visible and allow backdrop to show through */
overflow: visible;
z-index: 1; /* Ensure content sits above Aurora background */
}
.app-header {
@@ -186,7 +196,8 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
.main-container {
padding: 15px;
padding-bottom: 0;
height: 92vh;
/* Keep same parametrized behavior on mobile */
height: calc(100vh - (var(--app-vertical-margin) * 2));
}
.header-content {
@@ -275,4 +286,4 @@ const hasActiveTrack = computed(() => !!props.currentTrack)
background: var(--accent-primary);
}
}
</style>
</style>