From e279172dfecf5d109dc55f105b475b16754c63de Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sun, 23 Nov 2025 18:43:53 +0100
Subject: [PATCH] fix(ui): correct fonts, semicolons and preload target

- Add missing semicolon in apps/web/src/styles.scss to fix invalid CSS
  that could break style parsing for .scroll-viewport.
- Change preconnect in apps/web/src/index.html from fonts.gstatic.com to
  fonts.googleapis.com and consolidate multiple Google Fonts links into
  a single stylesheet URL to reduce redundant requests and ensure
  Material Icons and selected font families load together.
  Remove duplicated @import of Outfit in

  libs/ui/components/src/lib/multi-epg/multi-epg-container.component.scss,
  switch component font-family to Roboto (with fallback) and update
  button font to match, ensuring consistent typography and avoiding
  external import duplication across components. ese changes fix a
  ntax error, optimize font loading, and standardize
typography across the UI.
---
 apps/web/src/index.html                       | 12 +----
 apps/web/src/styles.scss                      | 50 -------------------
 .../multi-epg-container.component.scss        |  7 +--
 3 files changed, 4 insertions(+), 65 deletions(-)

diff --git a/apps/web/src/index.html b/apps/web/src/index.html
index 0bc670524..1d564b59e 100644
--- a/apps/web/src/index.html
+++ b/apps/web/src/index.html
@@ -20,17 +20,9 @@
         <link rel="manifest" href="manifest.webmanifest" />
         <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png" />
         <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link
-            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
-            rel="stylesheet"
-        />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Crimson+Pro:wght@400;600;700&family=DM+Sans:wght@400;500;600&display=swap"
-            rel="stylesheet"
-        />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Material+Icons"
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&family=JetBrains+Mono:wght@400;500&family=Crimson+Pro:wght@400;600;700&family=DM+Sans:wght@400;500;600&family=Material+Icons&display=swap"
             rel="stylesheet"
         />
         <script>
diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index 367950b42..86846957d 100644
--- a/apps/web/src/styles.scss
+++ b/apps/web/src/styles.scss
@@ -73,39 +73,6 @@ textarea,
     }
 }
 
-.cet-container {
-    .video-js {
-        height: calc(100vh - 93px) !important;
-    }
-
-    app-web-player-view > app-vjs-player > .video-js {
-        height: 100% !important;
-    }
-
-    #video-player {
-        width: 100%;
-        height: calc(100vh - 80px) !important;
-    }
-
-    .recent-playlists {
-        height: calc(100vh - 106px - 28px) !important;
-    }
-
-    #groups-list,
-    #favorites-list {
-        height: calc(100vh - 148px) !important;
-    }
-
-    .scroll-viewport {
-        min-height: calc(100vh - 210px) !important;
-    }
-
-    .scroll-viewport-portals {
-        min-height: calc(100vh - 170px) !important;
-        overflow-x: hidden !important;
-    }
-}
-
 .scroll-viewport-portals {
     min-height: calc(100vh - 170px) !important;
     overflow-x: hidden !important;
@@ -114,20 +81,3 @@ textarea,
 .mat-drawer-inner-container {
     overflow: hidden !important;
 }
-
-@media only screen and (max-width: 599px) {
-    .cet-container {
-        .video-js {
-            height: calc(50vh - 70px) !important;
-        }
-
-        #video-player {
-            height: calc(50vh - 80px) !important;
-        }
-
-        .scroll-viewport {
-            min-height: calc(50vh - 159px) !important
-        }
-    }
-
-}
\ No newline at end of file
diff --git a/libs/ui/components/src/lib/multi-epg/multi-epg-container.component.scss b/libs/ui/components/src/lib/multi-epg/multi-epg-container.component.scss
index 7b8df5e4f..1a63f804a 100644
--- a/libs/ui/components/src/lib/multi-epg/multi-epg-container.component.scss
+++ b/libs/ui/components/src/lib/multi-epg/multi-epg-container.component.scss
@@ -1,6 +1,3 @@
-// Import distinctive fonts
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
-
 // Color palette - Broadcast control room aesthetic
 $bg-deep: #0a0a0f;
 $bg-surface: #12121a;
@@ -42,7 +39,7 @@ $gradient-header: linear-gradient(
     display: flex;
     background: $bg-deep;
     color: $text-primary;
-    font-family: 'Outfit', sans-serif;
+    font-family: Roboto, 'Helvetica Neue', sans-serif;
     position: relative;
     overflow-y: auto;
     height: calc(100vh - 56px);
@@ -96,7 +93,7 @@ $gradient-header: linear-gradient(
 
     // Button styling
     button {
-        font-family: 'Outfit', sans-serif;
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
         font-weight: 500;
         letter-spacing: 0.02em;
         transition: all 0.2s ease;