From 82a10fc47c8117d18487c9794573a530df932c09 Mon Sep 17 00:00:00 2001
From: Michael Hollister <michael@futo.org>
Date: Wed, 16 Jul 2025 15:59:54 -0500
Subject: [PATCH] webOS: Fixed UI scaling to use correct resolution styles

---
 .../fcast-receiver/src/main/1280x720.css      |  66 ++---
 .../fcast-receiver/src/main/1920x1080.css     | 236 ++++++------------
 .../webos/fcast-receiver/src/main/style.css   |   9 +-
 .../fcast-receiver/src/player/1280x720.css    |  95 +------
 .../fcast-receiver/src/player/1920x1080.css   | 196 +--------------
 .../webos/fcast-receiver/src/player/style.css |  12 +
 .../fcast-receiver/src/viewer/1280x720.css    |  95 +------
 .../fcast-receiver/src/viewer/1920x1080.css   | 200 +--------------
 .../webos/fcast-receiver/src/viewer/style.css |   8 +
 9 files changed, 177 insertions(+), 740 deletions(-)

diff --git a/receivers/webos/fcast-receiver/src/main/1280x720.css b/receivers/webos/fcast-receiver/src/main/1280x720.css
index 8b38b4e..c7721e2 100644
--- a/receivers/webos/fcast-receiver/src/main/1280x720.css
+++ b/receivers/webos/fcast-receiver/src/main/1280x720.css
@@ -1,12 +1,12 @@
-
-/* @media only screen and ((max-width: 1279px) or (max-height: 719px)) { */
+/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
     .card {
         padding: 15px;
     }
 
     .card-title {
-        line-height: 18px;
+        line-height: 20px;
         margin: 5px;
+        margin-bottom: 10px;
     }
 
     .card-title-separator {
@@ -14,22 +14,27 @@
     }
 
     .iconSize {
-        width: 24px;
-        height: 24px;
+        width: 32px;
+        height: 32px;
     }
 
     #overlay {
-        gap: 10vw;
-        font-size: 18px;
+        gap: unset;
+        /* gap: 12.5vw; */
+        font-size: 20px;
+    }
+
+    #main-view {
+        margin-right: 12.5vw;
     }
 
     #title-text {
-        font-size: 80px;
+        font-size: 100px;
     }
 
     #title-icon {
-        width: 64px;
-        height: 64px;
+        width: 84px;
+        height: 84px;
         margin-right: 15px;
     }
 
@@ -50,10 +55,10 @@
     }
 
     #qr-code {
-        width: 128px;
-        height: 128px;
+        width: 192px;
+        height: 192px;
         margin: 15px auto;
-        padding: 8px;
+        padding: 12px;
     }
 
     #ips {
@@ -61,41 +66,42 @@
     }
 
     .ip-entry-text {
-        margin-top: 1.5px;
-        margin-bottom: 1.5px;
+        margin-top: 4px;
+        margin-bottom: 4px;
     }
 
     #window-can-be-closed {
-        margin-bottom: 10px;
-        font-size: 16px;
+        margin-bottom: 15px;
+        font-size: 18px;
     }
 
     .lds-ring {
-        width: 80px;
-        height: 80px;
+        width: 100px;
+        height: 100px;
     }
     .lds-ring div {
-        width: 64px;
-        height: 64px;
+        width: 84px;
+        height: 84px;
     }
 
     #connection-check {
-        width: 64px;
-        height: 64px;
-        margin: 20px;
+        width: 84px;
+        height: 84px;
+        margin: 24px;
     }
 
     #toast-notification {
-        padding: 4px;
-        top: -100px;
+        padding: 8px;
+        top: -140px;
     }
 
     #toast-icon {
-        width: 40px;
-        height: 40px;
+        width: 60px;
+        height: 60px;
+        margin-right: 15px;
     }
 
     #toast-text {
-        font-size: 18px;
+        font-size: 20px;
     }
-/* } */
+/* } */
\ No newline at end of file
diff --git a/receivers/webos/fcast-receiver/src/main/1920x1080.css b/receivers/webos/fcast-receiver/src/main/1920x1080.css
index 720ab67..4fb2533 100644
--- a/receivers/webos/fcast-receiver/src/main/1920x1080.css
+++ b/receivers/webos/fcast-receiver/src/main/1920x1080.css
@@ -1,13 +1,11 @@
-
-/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
+/* @media only screen and ((max-width: 2559px) or (max-height: 1439px)) { */
     .card {
-        padding: 15px;
+        padding: 25px;
     }
 
     .card-title {
-        line-height: 20px;
-        margin: 5px;
-        margin-bottom: 10px;
+        line-height: 24px;
+        margin: 10px;
     }
 
     .card-title-separator {
@@ -15,190 +13,100 @@
     }
 
     .iconSize {
-        width: 32px;
-        height: 32px;
+        width: 48px;
+        height: 48px;
     }
 
     #overlay {
-        gap: 12.5vw;
-        font-size: 20px;
+        gap: unset;
+        /* gap: 15vw; */
+        font-size: 28px;
+    }
+
+    #main-view {
+        margin-right: 15vw;
     }
 
     #title-text {
-        font-size: 100px;
+        font-size: 140px;
     }
 
     #title-icon {
-        width: 84px;
-        height: 84px;
-        margin-right: 15px;
+        width: 124px;
+        height: 124px;
+        margin-right: 25px;
     }
 
     #connection-status {
-        padding: 15px;
+        padding: 25px;
     }
 
     #connection-error-icon {
-        margin-top: 10px;
+        margin-top: 20px;
     }
 
     #connection-information-loading-text {
-        margin: 10px;
-    }
-
-    #scan-to-connect {
-        margin-top: 10px;
-    }
-
-    #qr-code {
-        width: 192px;
-        height: 192px;
-        margin: 15px auto;
-        padding: 12px;
-    }
-
-    #ips {
-        margin-top: 10px;
-    }
-
-    .ip-entry-text {
-        margin-top: 4px;
-        margin-bottom: 4px;
-    }
-
-    #window-can-be-closed {
-        margin-bottom: 15px;
-        font-size: 18px;
-    }
-
-    .lds-ring {
-        width: 100px;
-        height: 100px;
-    }
-    .lds-ring div {
-        width: 84px;
-        height: 84px;
-    }
-
-    #connection-check {
-        width: 84px;
-        height: 84px;
-        margin: 24px;
-    }
-
-    #toast-notification {
-        padding: 8px;
-        top: -140px;
-    }
-
-    #toast-icon {
-        width: 60px;
-        height: 60px;
-        margin-right: 15px;
-    }
-
-    #toast-text {
-        font-size: 20px;
-    }
-/* } */
-
-@media only screen and ((max-width: 1279px) or (max-height: 719px)) {
-    .card {
-        padding: 15px;
-    }
-
-    .card-title {
-        line-height: 18px;
-        margin: 5px;
-    }
-
-    .card-title-separator {
-        margin: 3px 0px;
-    }
-
-    .iconSize {
-        width: 24px;
-        height: 24px;
-    }
-
-    #overlay {
-        gap: 10vw;
-        font-size: 18px;
-    }
-
-    #title-text {
-        font-size: 80px;
-    }
-
-    #title-icon {
-        width: 64px;
-        height: 64px;
-        margin-right: 15px;
-    }
-
-    #connection-status {
-        padding: 15px;
-    }
-
-    #connection-error-icon {
-        margin-top: 10px;
-    }
-
-    #connection-information-loading-text {
-        margin: 10px;
-    }
-
-    #scan-to-connect {
-        margin-top: 10px;
-    }
-
-    #qr-code {
-        width: 128px;
-        height: 128px;
-        margin: 15px auto;
-        padding: 8px;
-    }
-
-    #ips {
-        margin-top: 10px;
-    }
-
-    .ip-entry-text {
-        margin-top: 1.5px;
-        margin-bottom: 1.5px;
-    }
-
-    #window-can-be-closed {
-        margin-bottom: 10px;
-        font-size: 16px;
-    }
-
-    .lds-ring {
-        width: 80px;
-        height: 80px;
-    }
-    .lds-ring div {
-        width: 64px;
-        height: 64px;
-    }
-
-    #connection-check {
-        width: 64px;
-        height: 64px;
         margin: 20px;
     }
 
+    #scan-to-connect {
+        margin-top: 20px;
+    }
+
+    #qr-code {
+        width: 256px;
+        height: 256px;
+        margin: 20px auto;
+        padding: 16px;
+    }
+
+    #connection-details-separator {
+        margin-top: 15px;
+    }
+
+    #ips {
+        margin-top: 20px;
+        gap: 15px;
+    }
+
+    .ip-entry-text {
+        margin-top: 7px;
+        margin-bottom: 7px;
+    }
+
+    #window-can-be-closed {
+        margin-bottom: 20px;
+        font-size: 24px;
+    }
+
+    .lds-ring {
+        width: 120px;
+        height: 120px;
+    }
+    .lds-ring div {
+        width: 104px;
+        height: 104px;
+    }
+
+    #connection-check {
+        width: 104px;
+        height: 104px;
+        margin: 28px;
+    }
+
     #toast-notification {
-        padding: 4px;
-        top: -100px;
+        padding: 12px;
+        top: -175px;
     }
 
     #toast-icon {
-        width: 40px;
-        height: 40px;
+        width: 70px;
+        height: 70px;
+        margin: 5px 10px;
+        margin-right: 15px;
     }
 
     #toast-text {
-        font-size: 18px;
+        font-size: 28px;
     }
-}
+/* } */
diff --git a/receivers/webos/fcast-receiver/src/main/style.css b/receivers/webos/fcast-receiver/src/main/style.css
index bc51980..30d13f5 100644
--- a/receivers/webos/fcast-receiver/src/main/style.css
+++ b/receivers/webos/fcast-receiver/src/main/style.css
@@ -10,14 +10,6 @@ html {
 
 #overlay {
     font-family: InterRegular;
-    /* gap not supported in WebOS 6.0 */
-    gap: unset;
-}
-
-#main-view {
-    /* gap not supported in WebOS 6.0 */
-    gap: unset;
-    margin-right: 15vw;
 }
 
 #title-text {
@@ -33,6 +25,7 @@ html {
     font-family: InterBold;
 }
 
+/* gap not supported in WebOS 6.0 */
 #ips {
     gap: unset;
 }
diff --git a/receivers/webos/fcast-receiver/src/player/1280x720.css b/receivers/webos/fcast-receiver/src/player/1280x720.css
index 8b38b4e..65bcd41 100644
--- a/receivers/webos/fcast-receiver/src/player/1280x720.css
+++ b/receivers/webos/fcast-receiver/src/player/1280x720.css
@@ -1,101 +1,30 @@
-
-/* @media only screen and ((max-width: 1279px) or (max-height: 719px)) { */
-    .card {
-        padding: 15px;
-    }
-
-    .card-title {
-        line-height: 18px;
-        margin: 5px;
-    }
-
-    .card-title-separator {
-        margin: 3px 0px;
-    }
-
-    .iconSize {
-        width: 24px;
-        height: 24px;
-    }
-
-    #overlay {
-        gap: 10vw;
-        font-size: 18px;
-    }
-
-    #title-text {
-        font-size: 80px;
-    }
-
+/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
     #title-icon {
-        width: 64px;
-        height: 64px;
-        margin-right: 15px;
-    }
-
-    #connection-status {
-        padding: 15px;
-    }
-
-    #connection-error-icon {
-        margin-top: 10px;
-    }
-
-    #connection-information-loading-text {
-        margin: 10px;
-    }
-
-    #scan-to-connect {
-        margin-top: 10px;
-    }
-
-    #qr-code {
-        width: 128px;
-        height: 128px;
-        margin: 15px auto;
-        padding: 8px;
-    }
-
-    #ips {
-        margin-top: 10px;
-    }
-
-    .ip-entry-text {
-        margin-top: 1.5px;
-        margin-bottom: 1.5px;
-    }
-
-    #window-can-be-closed {
-        margin-bottom: 10px;
-        font-size: 16px;
+        width: 84px;
+        height: 84px;
     }
 
     .lds-ring {
-        width: 80px;
-        height: 80px;
+        width: 100px;
+        height: 100px;
     }
     .lds-ring div {
-        width: 64px;
-        height: 64px;
-    }
-
-    #connection-check {
-        width: 64px;
-        height: 64px;
-        margin: 20px;
+        width: 84px;
+        height: 84px;
     }
 
     #toast-notification {
-        padding: 4px;
-        top: -100px;
+        padding: 8px;
     }
 
     #toast-icon {
         width: 40px;
         height: 40px;
+        margin: 5px 5px;
+        margin-right: 10px;
     }
 
     #toast-text {
-        font-size: 18px;
+        font-size: 16px;
     }
-/* } */
+/* } */
\ No newline at end of file
diff --git a/receivers/webos/fcast-receiver/src/player/1920x1080.css b/receivers/webos/fcast-receiver/src/player/1920x1080.css
index 720ab67..bc2b3f3 100644
--- a/receivers/webos/fcast-receiver/src/player/1920x1080.css
+++ b/receivers/webos/fcast-receiver/src/player/1920x1080.css
@@ -1,204 +1,30 @@
-
-/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
-    .card {
-        padding: 15px;
-    }
-
-    .card-title {
-        line-height: 20px;
-        margin: 5px;
-        margin-bottom: 10px;
-    }
-
-    .card-title-separator {
-        margin: 3px 0px;
-    }
-
-    .iconSize {
-        width: 32px;
-        height: 32px;
-    }
-
-    #overlay {
-        gap: 12.5vw;
-        font-size: 20px;
-    }
-
-    #title-text {
-        font-size: 100px;
-    }
-
+/* @media only screen and ((max-width: 2559px) or (max-height: 1439px)) { */
     #title-icon {
-        width: 84px;
-        height: 84px;
-        margin-right: 15px;
-    }
-
-    #connection-status {
-        padding: 15px;
-    }
-
-    #connection-error-icon {
-        margin-top: 10px;
-    }
-
-    #connection-information-loading-text {
-        margin: 10px;
-    }
-
-    #scan-to-connect {
-        margin-top: 10px;
-    }
-
-    #qr-code {
-        width: 192px;
-        height: 192px;
-        margin: 15px auto;
-        padding: 12px;
-    }
-
-    #ips {
-        margin-top: 10px;
-    }
-
-    .ip-entry-text {
-        margin-top: 4px;
-        margin-bottom: 4px;
-    }
-
-    #window-can-be-closed {
-        margin-bottom: 15px;
-        font-size: 18px;
+        width: 124px;
+        height: 124px;
     }
 
     .lds-ring {
-        width: 100px;
-        height: 100px;
+        width: 120px;
+        height: 120px;
     }
     .lds-ring div {
-        width: 84px;
-        height: 84px;
-    }
-
-    #connection-check {
-        width: 84px;
-        height: 84px;
-        margin: 24px;
+        width: 104px;
+        height: 104px;
     }
 
     #toast-notification {
-        padding: 8px;
-        top: -140px;
+        padding: 12px;
     }
 
     #toast-icon {
         width: 60px;
         height: 60px;
-        margin-right: 15px;
+        margin: 5px 5px;
+        margin-right: 10px;
     }
 
     #toast-text {
-        font-size: 20px;
+        font-size: 22px;
     }
 /* } */
-
-@media only screen and ((max-width: 1279px) or (max-height: 719px)) {
-    .card {
-        padding: 15px;
-    }
-
-    .card-title {
-        line-height: 18px;
-        margin: 5px;
-    }
-
-    .card-title-separator {
-        margin: 3px 0px;
-    }
-
-    .iconSize {
-        width: 24px;
-        height: 24px;
-    }
-
-    #overlay {
-        gap: 10vw;
-        font-size: 18px;
-    }
-
-    #title-text {
-        font-size: 80px;
-    }
-
-    #title-icon {
-        width: 64px;
-        height: 64px;
-        margin-right: 15px;
-    }
-
-    #connection-status {
-        padding: 15px;
-    }
-
-    #connection-error-icon {
-        margin-top: 10px;
-    }
-
-    #connection-information-loading-text {
-        margin: 10px;
-    }
-
-    #scan-to-connect {
-        margin-top: 10px;
-    }
-
-    #qr-code {
-        width: 128px;
-        height: 128px;
-        margin: 15px auto;
-        padding: 8px;
-    }
-
-    #ips {
-        margin-top: 10px;
-    }
-
-    .ip-entry-text {
-        margin-top: 1.5px;
-        margin-bottom: 1.5px;
-    }
-
-    #window-can-be-closed {
-        margin-bottom: 10px;
-        font-size: 16px;
-    }
-
-    .lds-ring {
-        width: 80px;
-        height: 80px;
-    }
-    .lds-ring div {
-        width: 64px;
-        height: 64px;
-    }
-
-    #connection-check {
-        width: 64px;
-        height: 64px;
-        margin: 20px;
-    }
-
-    #toast-notification {
-        padding: 4px;
-        top: -100px;
-    }
-
-    #toast-icon {
-        width: 40px;
-        height: 40px;
-    }
-
-    #toast-text {
-        font-size: 18px;
-    }
-}
diff --git a/receivers/webos/fcast-receiver/src/player/style.css b/receivers/webos/fcast-receiver/src/player/style.css
index 71f2198..23f2186 100644
--- a/receivers/webos/fcast-receiver/src/player/style.css
+++ b/receivers/webos/fcast-receiver/src/player/style.css
@@ -1,5 +1,9 @@
 /* WebOS custom player styles */
 
+html {
+    overflow: hidden;
+}
+
 .container {
     height: 240px;
 }
@@ -180,3 +184,11 @@
 #captions {
     display: none;
 }
+
+#toast-notification {
+    gap: unset;
+}
+
+#toast-text {
+    font-family: InterRegular;
+}
diff --git a/receivers/webos/fcast-receiver/src/viewer/1280x720.css b/receivers/webos/fcast-receiver/src/viewer/1280x720.css
index 8b38b4e..63ab28a 100644
--- a/receivers/webos/fcast-receiver/src/viewer/1280x720.css
+++ b/receivers/webos/fcast-receiver/src/viewer/1280x720.css
@@ -1,101 +1,30 @@
-
-/* @media only screen and ((max-width: 1279px) or (max-height: 719px)) { */
-    .card {
-        padding: 15px;
-    }
-
-    .card-title {
-        line-height: 18px;
-        margin: 5px;
-    }
-
-    .card-title-separator {
-        margin: 3px 0px;
-    }
-
-    .iconSize {
-        width: 24px;
-        height: 24px;
-    }
-
-    #overlay {
-        gap: 10vw;
-        font-size: 18px;
-    }
-
-    #title-text {
-        font-size: 80px;
-    }
-
-    #title-icon {
-        width: 64px;
-        height: 64px;
-        margin-right: 15px;
-    }
-
-    #connection-status {
-        padding: 15px;
-    }
-
-    #connection-error-icon {
-        margin-top: 10px;
-    }
-
-    #connection-information-loading-text {
-        margin: 10px;
-    }
-
-    #scan-to-connect {
-        margin-top: 10px;
-    }
-
-    #qr-code {
-        width: 128px;
-        height: 128px;
-        margin: 15px auto;
-        padding: 8px;
-    }
-
-    #ips {
-        margin-top: 10px;
-    }
-
-    .ip-entry-text {
-        margin-top: 1.5px;
-        margin-bottom: 1.5px;
-    }
-
-    #window-can-be-closed {
-        margin-bottom: 10px;
-        font-size: 16px;
+/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
+    #titleIcon {
+        width: 84px;
+        height: 84px;
     }
 
     .lds-ring {
-        width: 80px;
-        height: 80px;
+        width: 100px;
+        height: 100px;
     }
     .lds-ring div {
-        width: 64px;
-        height: 64px;
-    }
-
-    #connection-check {
-        width: 64px;
-        height: 64px;
-        margin: 20px;
+        width: 84px;
+        height: 84px;
     }
 
     #toast-notification {
-        padding: 4px;
-        top: -100px;
+        padding: 8px;
     }
 
     #toast-icon {
         width: 40px;
         height: 40px;
+        margin: 5px 5px;
+        margin-right: 10px;
     }
 
     #toast-text {
-        font-size: 18px;
+        font-size: 16px;
     }
 /* } */
diff --git a/receivers/webos/fcast-receiver/src/viewer/1920x1080.css b/receivers/webos/fcast-receiver/src/viewer/1920x1080.css
index 720ab67..2293970 100644
--- a/receivers/webos/fcast-receiver/src/viewer/1920x1080.css
+++ b/receivers/webos/fcast-receiver/src/viewer/1920x1080.css
@@ -1,204 +1,30 @@
-
-/* @media only screen and ((max-width: 1919px) or (max-height: 1079px)) { */
-    .card {
-        padding: 15px;
-    }
-
-    .card-title {
-        line-height: 20px;
-        margin: 5px;
-        margin-bottom: 10px;
-    }
-
-    .card-title-separator {
-        margin: 3px 0px;
-    }
-
-    .iconSize {
-        width: 32px;
-        height: 32px;
-    }
-
-    #overlay {
-        gap: 12.5vw;
-        font-size: 20px;
-    }
-
-    #title-text {
-        font-size: 100px;
-    }
-
-    #title-icon {
-        width: 84px;
-        height: 84px;
-        margin-right: 15px;
-    }
-
-    #connection-status {
-        padding: 15px;
-    }
-
-    #connection-error-icon {
-        margin-top: 10px;
-    }
-
-    #connection-information-loading-text {
-        margin: 10px;
-    }
-
-    #scan-to-connect {
-        margin-top: 10px;
-    }
-
-    #qr-code {
-        width: 192px;
-        height: 192px;
-        margin: 15px auto;
-        padding: 12px;
-    }
-
-    #ips {
-        margin-top: 10px;
-    }
-
-    .ip-entry-text {
-        margin-top: 4px;
-        margin-bottom: 4px;
-    }
-
-    #window-can-be-closed {
-        margin-bottom: 15px;
-        font-size: 18px;
+/* @media only screen and ((max-width: 2559px) or (max-height: 1439px)) { */
+    #titleIcon {
+        width: 124px;
+        height: 124px;
     }
 
     .lds-ring {
-        width: 100px;
-        height: 100px;
+        width: 120px;
+        height: 120px;
     }
     .lds-ring div {
-        width: 84px;
-        height: 84px;
-    }
-
-    #connection-check {
-        width: 84px;
-        height: 84px;
-        margin: 24px;
+        width: 104px;
+        height: 104px;
     }
 
     #toast-notification {
-        padding: 8px;
-        top: -140px;
+        padding: 12px;
     }
 
     #toast-icon {
         width: 60px;
         height: 60px;
-        margin-right: 15px;
+        margin: 5px 5px;
+        margin-right: 10px;
     }
 
     #toast-text {
-        font-size: 20px;
+        font-size: 22px;
     }
-/* } */
-
-@media only screen and ((max-width: 1279px) or (max-height: 719px)) {
-    .card {
-        padding: 15px;
-    }
-
-    .card-title {
-        line-height: 18px;
-        margin: 5px;
-    }
-
-    .card-title-separator {
-        margin: 3px 0px;
-    }
-
-    .iconSize {
-        width: 24px;
-        height: 24px;
-    }
-
-    #overlay {
-        gap: 10vw;
-        font-size: 18px;
-    }
-
-    #title-text {
-        font-size: 80px;
-    }
-
-    #title-icon {
-        width: 64px;
-        height: 64px;
-        margin-right: 15px;
-    }
-
-    #connection-status {
-        padding: 15px;
-    }
-
-    #connection-error-icon {
-        margin-top: 10px;
-    }
-
-    #connection-information-loading-text {
-        margin: 10px;
-    }
-
-    #scan-to-connect {
-        margin-top: 10px;
-    }
-
-    #qr-code {
-        width: 128px;
-        height: 128px;
-        margin: 15px auto;
-        padding: 8px;
-    }
-
-    #ips {
-        margin-top: 10px;
-    }
-
-    .ip-entry-text {
-        margin-top: 1.5px;
-        margin-bottom: 1.5px;
-    }
-
-    #window-can-be-closed {
-        margin-bottom: 10px;
-        font-size: 16px;
-    }
-
-    .lds-ring {
-        width: 80px;
-        height: 80px;
-    }
-    .lds-ring div {
-        width: 64px;
-        height: 64px;
-    }
-
-    #connection-check {
-        width: 64px;
-        height: 64px;
-        margin: 20px;
-    }
-
-    #toast-notification {
-        padding: 4px;
-        top: -100px;
-    }
-
-    #toast-icon {
-        width: 40px;
-        height: 40px;
-    }
-
-    #toast-text {
-        font-size: 18px;
-    }
-}
+/* } */
\ No newline at end of file
diff --git a/receivers/webos/fcast-receiver/src/viewer/style.css b/receivers/webos/fcast-receiver/src/viewer/style.css
index b2c5fbf..ef655f7 100644
--- a/receivers/webos/fcast-receiver/src/viewer/style.css
+++ b/receivers/webos/fcast-receiver/src/viewer/style.css
@@ -3,3 +3,11 @@
 html {
     overflow: hidden;
 }
+
+#toast-notification {
+    gap: unset;
+}
+
+#toast-text {
+    font-family: InterRegular;
+}