From 12204f06df8397662ca62d826ebb3a1aba8b117c Mon Sep 17 00:00:00 2001 From: wanhose Date: Thu, 10 Oct 2024 15:54:57 +0200 Subject: [PATCH] fix(browser-extension): how options and popup look on mobile --- packages/browser-extension/src/options.html | 1 + packages/browser-extension/src/popup.html | 1 + packages/browser-extension/src/styles/options.css | 15 ++++++++++++++- packages/browser-extension/src/styles/popup.css | 14 ++++++++++++++ 4 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/browser-extension/src/options.html b/packages/browser-extension/src/options.html index f8bb145..c267640 100644 --- a/packages/browser-extension/src/options.html +++ b/packages/browser-extension/src/options.html @@ -2,6 +2,7 @@ + Cookie Dialog Monster > Exclusion List diff --git a/packages/browser-extension/src/popup.html b/packages/browser-extension/src/popup.html index 53bb601..c0a7c72 100644 --- a/packages/browser-extension/src/popup.html +++ b/packages/browser-extension/src/popup.html @@ -2,6 +2,7 @@ + diff --git a/packages/browser-extension/src/styles/options.css b/packages/browser-extension/src/styles/options.css index 1b97cff..ca9c6d7 100644 --- a/packages/browser-extension/src/styles/options.css +++ b/packages/browser-extension/src/styles/options.css @@ -40,6 +40,12 @@ button[data-variant='large'] { padding: 8px; } +@media (max-width: 768px) { + button[data-variant='large'] { + justify-content: flex-end; + } +} + button:focus, button:hover { background-color: var(--color-secondary); @@ -104,11 +110,18 @@ main { .button-group { display: flex; - justify-content: flex-end; gap: 4px; + justify-content: flex-end; margin-bottom: 4px; } +@media (max-width: 768px) { + .button-group { + display: grid; + grid-template-columns: repeat(2, minmax(0px, 1fr)); + } +} + #exclusion-list { font-size: 14px; list-style: none; diff --git a/packages/browser-extension/src/styles/popup.css b/packages/browser-extension/src/styles/popup.css index f1150a5..bd4bf52 100644 --- a/packages/browser-extension/src/styles/popup.css +++ b/packages/browser-extension/src/styles/popup.css @@ -15,6 +15,12 @@ body { width: 320px; } +@media (max-width: 768px) { + body { + width: auto; + } +} + body * { box-sizing: border-box; } @@ -74,6 +80,14 @@ header { } } +@media (max-width: 768px) { + main { + margin: 0 auto; + max-width: 320px; + width: 100%; + } +} + main > .banner { background-color: #f39c12; color: #c0392b;