feat: improve styles and layouts for better consistency and responsiveness

frontend/src/components/UploadsPanel.vue

@@ -40,33 +40,6 @@ function play(filename: string) {
       <span class="queue-count">{{ filesLabel(files.length) }}</span>
     </div>
 
-    <div class="upload-area">
-      <input
-        ref="fileInput"
-        type="file"
-        hidden
-        multiple
-        accept=".aac,.avi,.flac,.flv,.m4a,.m4v,.mkv,.mov,.mp3,.mp4,.mpeg,.mpg,.oga,.ogg,.opus,.ts,.wav,.webm,.wma"
-        @change="onFilesPicked"
-      >
-      <button
-        class="btn btn-secondary btn-block"
-        :disabled="uploading"
-        @click="fileInput?.click()"
-      >
-        <UploadCloud /> Prześlij plik wideo/audio na serwer
-      </button>
-      <div
-        v-if="uploading"
-        class="upload-progress"
-      >
-        <div class="progress-bar-bg">
-          <div class="progress-bar-fill indeterminate" />
-        </div>
-        <span class="time-text">{{ uploadLabel }}</span>
-      </div>
-    </div>
-
     <div class="queue-list-container list-short">
       <ul class="queue-list">
         <UploadedFileRow
@@ -86,18 +59,50 @@ function play(filename: string) {
       </ul>
     </div>
 
-    <button
-      class="btn btn-secondary btn-block"
-      @click="$emit('openLibrary')"
+    <div class="uploads-actions">
+      <input
+        ref="fileInput"
+        type="file"
+        hidden
+        multiple
+        accept=".aac,.avi,.flac,.flv,.m4a,.m4v,.mkv,.mov,.mp3,.mp4,.mpeg,.mpg,.oga,.ogg,.opus,.ts,.wav,.webm,.wma"
+        @change="onFilesPicked"
+      >
+      <button
+        class="btn btn-secondary"
+        :disabled="uploading"
+        @click="fileInput?.click()"
+      >
+        <UploadCloud /> Prześlij
+      </button>
+      <button
+        class="btn btn-secondary"
+        @click="$emit('openLibrary')"
+      >
+        <FolderOpen /> Wszystkie ({{ files.length }})
+      </button>
+    </div>
+    <div
+      v-if="uploading"
+      class="upload-progress"
     >
-      <FolderOpen /> Pokaż wszystkie pliki na serwerze ({{ files.length }})
-    </button>
+      <div class="progress-bar-bg">
+        <div class="progress-bar-fill indeterminate" />
+      </div>
+      <span class="time-text">{{ uploadLabel }}</span>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.upload-area {
-  margin-bottom: 15px;
+.uploads-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 15px;
+}
+
+.uploads-actions .btn {
+  flex: 1;
 }
 
 .upload-progress {
@@ -109,8 +114,4 @@ function play(filename: string) {
   display: block;
   margin-top: 4px;
 }
-
-.btn-block:last-of-type {
-  margin-top: 10px;
-}
 </style>