style(m3u): adjust channel list item width and add responsive container queries

Entire-Checkpoint: 3ba3a7503b59

libs/ui/components/src/lib/channel-list-container/all-channels-tab/all-channels-tab.component.scss

@@ -3,6 +3,12 @@
 .scroll-viewport {
     min-height: calc(100vh - 190px);
     overflow-x: hidden;
+    width: 100%;
+
+    ::ng-deep .cdk-virtual-scroll-content-wrapper {
+        width: 100%;
+        max-width: 100%;
+    }
 }
 
 .search-panel {

libs/ui/components/src/lib/channel-list-container/channel-list-container.component.scss

@@ -1,3 +1,10 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    container-type: inline-size;
+}
+
 ::ng-deep {
     .mat-mdc-tab.mdc-tab {
         padding: 0 5px;

libs/ui/components/src/lib/channel-list-container/channel-list-item/channel-list-item.component.scss

@@ -1,6 +1,6 @@
 // Main channel list item container
 .channel-list-item {
-    width: 360px;
+    width: 100%;
     display: flex;
     align-items: center;
     height: 68px;
@@ -9,6 +9,9 @@
     cursor: pointer;
     transition: background-color 0.2s ease;
     gap: 12px;
+    box-sizing: border-box;
+    min-width: 0;
+    overflow: hidden;
 
     &:hover {
         background-color: rgba(0, 0, 0, 0.04);
@@ -224,3 +227,69 @@
         }
     }
 }
+
+// ============================================================================
+// Container queries for responsive sidebar resizing
+// ============================================================================
+
+@container (max-width: 350px) {
+    .channel-list-item {
+        gap: 8px;
+        padding: 6px 8px;
+    }
+
+    .channel-logo {
+        width: 36px;
+        height: 36px;
+    }
+
+    // Hide EPG timeline (progress bar + times) but keep program title
+    .epg-timeline {
+        display: none;
+    }
+
+    .epg-placeholder {
+        display: none;
+    }
+
+    // Hide info button, keep only favorite
+    .program-info-button {
+        display: none;
+    }
+}
+
+@container (max-width: 280px) {
+    .channel-logo {
+        width: 28px;
+        height: 28px;
+    }
+
+    // Hide all EPG content
+    .epg-container {
+        display: none;
+    }
+
+    .channel-list-item {
+        height: 48px;
+
+        &.compact {
+            height: 40px;
+        }
+    }
+
+    // Hide action buttons
+    .action-buttons {
+        display: none;
+    }
+}
+
+@container (max-width: 200px) {
+    .channel-logo {
+        display: none;
+    }
+
+    .channel-list-item {
+        gap: 4px;
+        padding: 4px 6px;
+    }
+}