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;