feat: improve styles and layouts for better consistency and responsiveness

frontend/src/assets/style.css

@@ -146,6 +146,7 @@ body {
     font-weight: 600;
     border: 1px solid var(--border-glass);
     transition: var(--transition-smooth);
+    white-space: nowrap;
 }
 
 .status-indicator {
@@ -153,6 +154,7 @@ body {
     height: 8px;
     border-radius: 50%;
     display: inline-block;
+    flex-shrink: 0;
 }
 
 .status-indicator.online {
@@ -282,6 +284,17 @@ body {
     transform: translateY(0);
 }
 
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text-main);
+    border: 1px solid var(--border-glass);
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
 .btn-glow {
     position: relative;
     overflow: hidden;

frontend/src/components/AddTrackPanel.vue

@@ -56,7 +56,9 @@ async function submit() {
           v-if="busy"
           class="spinner"
         />
-        <span v-else><Plus /> Dodaj</span>
+        <template v-else>
+          <Plus /> Dodaj
+        </template>
       </button>
     </form>
   </div>

frontend/src/components/AppHeader.vue

@@ -14,7 +14,7 @@ const activeChannel = computed(() => props.status?.active_voice_channel ?? null)
 
 const label = computed(() =>
   activeChannel.value
-    ? `Połączony: ${activeChannel.value.channel_name} (${activeChannel.value.guild_name})`
+    ? `Połączony: ${activeChannel.value.channel_name}`
     : 'Rozłączony',
 )
 </script>
@@ -69,4 +69,18 @@ const label = computed(() =>
   align-items: center;
   gap: 8px;
 }
+
+@media (max-width: 768px) {
+  .main-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .header-actions {
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
 </style>

frontend/src/components/ModalShell.vue

@@ -27,7 +27,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown))
           <slot name="title" />
         </h2>
         <button
-          class="btn-icon"
+          class="btn-icon btn-secondary"
           title="Zamknij"
           @click="$emit('close')"
         >

frontend/src/components/PlayerPanel.vue

@@ -154,9 +154,6 @@ async function cycleLoop() {
 
 <template>
   <div class="glass-card player-panel">
-    <div class="card-header-actions">
-      <span class="badge badge-live">Live</span>
-    </div>
 
     <div class="visualizer-container">
       <div

frontend/src/components/QueuePanel.vue

@@ -91,15 +91,6 @@ const restoreQueue = () =>
       </h2>
       <span class="queue-count">{{ tracksLabel(queue.length) }}</span>
     </div>
-    <button
-      class="btn btn-secondary btn-block restore-queue-button"
-      :disabled="!savedQueueAvailable"
-      title="Przywróć kolejkę zapisaną przed ostatnim zatrzymaniem lub rozłączeniem"
-      @click="restoreQueue"
-    >
-      <RotateCcw /> Przywróć ostatnią kolejkę
-    </button>
-
     <div class="queue-list-container">
       <ul class="queue-list">
         <QueueItem
@@ -132,11 +123,19 @@ const restoreQueue = () =>
         </div>
       </ul>
     </div>
+    <button
+      class="btn btn-secondary btn-block restore-queue-button"
+      :disabled="!savedQueueAvailable"
+      title="Przywróć kolejkę zapisaną przed ostatnim zatrzymaniem lub rozłączeniem"
+      @click="restoreQueue"
+    >
+      <RotateCcw /> Przywróć ostatnią kolejkę
+    </button>
   </div>
 </template>
 
 <style scoped>
 .restore-queue-button {
-  margin-bottom: 14px;
+  margin-top: 14px;
 }
 </style>

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
+    <div class="uploads-actions">
-      class="btn btn-secondary btn-block"
+      <input
-      @click="$emit('openLibrary')"
+        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 }})
+      <div class="progress-bar-bg">
-    </button>
+        <div class="progress-bar-fill indeterminate" />
+      </div>
+      <span class="time-text">{{ uploadLabel }}</span>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.upload-area {
+.uploads-actions {
-  margin-bottom: 15px;
+  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>

frontend/src/components/VoiceChannelPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { Bell, LogIn, LogOut, Radio } from 'lucide-vue-next'
+import { LogIn, LogOut, Radio } from 'lucide-vue-next'
 import { api } from '@/api/client'
 import { useToasts } from '@/composables/useToasts'
 import type { BotStatus } from '@/types/status'
@@ -115,7 +115,7 @@ async function saveDefaultPlays() {
       </button>
     </div>
     <div class="notification-channel-row">
-      <label for="notification-channel"><Bell /> Kanał logów</label>
+      <label for="notification-channel">Kanał logów</label>
       <select
         id="notification-channel"
         v-model="selectedNotification"