style: visual improvements

src/app/home/text-import/text-import.component.scss

@@ -1,5 +1,5 @@
 button {
-    margin: 15px;
+    margin: 0 15px;
     text-transform: uppercase;
 }
 

src/app/player/components/channel-list-container/channel-list-container.component.scss

@@ -65,7 +65,7 @@
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     font-size: 0.9em;
-    width: 290px;
+    max-width: 290px;
 }
 
 [type='search']::-webkit-search-cancel-button {
@@ -78,3 +78,8 @@
     background-size: 10px 10px;
     color: #fff;
 }
+
+#groups-list,
+#favorites-list {
+    height: calc(100vh - 120px);
+}

src/app/player/components/info-overlay/info-overlay.component.html

@@ -1,18 +1,17 @@
 <div
     class="channel-overlay"
-    fxLayout="row"
     *ngIf="channel && epgProgram"
     [class.visible]="isVisible"
     [class.hidden]="!isVisible"
 >
-    <div fxFlex="100px" fxLayoutAlign="center start" class="channel-logo">
+    <div class="channel-logo">
         <img
             [src]="epgProgram?.icon[0] || channel?.tvg?.logo"
             width="68"
             onerror="this.style.display='none'"
         />
     </div>
-    <div fxFlex>
+    <div class="content">
         <div class="program-name">
             {{ epgProgram?.title[0]?.value }} | {{ channel.name }}
         </div>

src/app/player/components/info-overlay/info-overlay.component.scss

@@ -10,6 +10,9 @@
     left: 0;
     right: 0;
     backdrop-filter: blur(10px);
+    flex-direction: row;
+    box-sizing: border-box;
+    display: flex;
 }
 
 .program-name,
@@ -23,6 +26,18 @@
 
 .channel-logo {
     margin-top: 20px;
+    place-content: flex-start center;
+    align-items: flex-start;
+    flex-direction: row;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1 1 100px;
+    max-width: 100px;
+    min-width: 100px;
+}
+
+.content {
+    width: 100%;
 }
 
 .program-progress {

src/styles.scss

@@ -11,11 +11,12 @@ $material-icons-font-path: '~material-icons/iconfont/';
 
 body,
 html {
-    background: #fff;
     user-select: none;
     margin: 0;
     padding: 0;
     height: 100%;
+    width: 100%;
+    overflow: auto;
     font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -81,8 +82,6 @@ textarea,
 }
 
 .cet-container {
-    height: calc(100vh);
-
     .video-js {
         height: calc(100vh - 82px) !important;
     }
@@ -95,4 +94,9 @@ textarea,
     .recent-playlists {
         height: calc(100vh - 152px - 28px) !important;
     }
+
+    #groups-list,
+    #favorites-list {
+        height: calc(100vh - 148px) !important;
+    }
 }