From c23635a646fd86008aa2773993979808ffc493e4 Mon Sep 17 00:00:00 2001
From: carlmp98-Dev <carlmp98@gmail.com>
Date: Fri, 10 Jul 2026 18:10:34 -0400
Subject: [PATCH] Optimize popup layout on mobile devices to prevent cutoff

---
 platform/mv3/extension/css/popup.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/platform/mv3/extension/css/popup.css b/platform/mv3/extension/css/popup.css
index b3eea177e72ec..ccb551ba6b5d7 100644
--- a/platform/mv3/extension/css/popup.css
+++ b/platform/mv3/extension/css/popup.css
@@ -18,6 +18,9 @@
         var(--filtering-mode-button-size) / 2
     );
 }
+:root.mobile {
+    --filtering-mode-button-size: 52px;
+}
 
 :root body,
 :root.mobile body {
@@ -26,6 +29,9 @@
     --popup-gap-extra-thin: calc(0.25 * var(--popup-gap));
     min-width: var(--popup-min-width);
 }
+:root.mobile body {
+    --popup-gap: calc(0.75 * var(--font-size));
+}
 :root body.loading {
     visibility: hidden;
 }
@@ -86,6 +92,9 @@ hr {
     text-align: center;
     word-break: break-all;
 }
+:root.mobile #hostname {
+    min-height: calc(var(--font-size) * 2.2);
+}
 #hostname > span {
     word-break: break-all;
 }
@@ -145,6 +154,10 @@ body.needReload #refresh {
     margin: 0.5em 0;
     padding-top: 0.5em;
 }
+:root.mobile .toolMenu {
+    margin: 0.25em 0;
+    padding-top: 0.25em;
+}
 :root:not(.isHTTP) .needHTTP {
     display: none;
 }
@@ -160,6 +173,9 @@ body.needReload #refresh {
     padding: 0.5em 0.5em 0.5em 0;
     unicode-bidi: embed;
 }
+:root.mobile .toolMenu > .tool {
+    padding: 0.35em 0.5em 0.35em 0;
+}
 .toolMenu > .tool:hover {
     color: var(--ink-1);
       fill: var(--ink-1);
@@ -192,6 +208,9 @@ body.needReload #refresh {
     unicode-bidi: embed;
     visibility: hidden;
 }
+:root.mobile .toolRibbon .tool {
+    padding: 8px 12px;
+}
 .toolRibbon .tool:hover {
     color: var(--ink-1);
         fill: var(--ink-1);
@@ -210,6 +229,9 @@ body.needReload #refresh {
     margin-top: 6px;
     text-align: center;
 }
+:root.mobile .toolRibbon .tool .caption {
+    margin-top: 4px;
+}
 :root:not(.mobile) .toolRibbon .caption {
     display: none;
 }