1 files changed, 93 insertions, 42 deletions

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index e401a64a1..c2ebd6c01 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -27,6 +27,7 @@ body {
 
 .content {
 	grid-column: 1 / span 3; /* stretch entire width, to fit panel + sidebar nav */
+	width: 100%;
 }
 
 section {
@@ -51,7 +52,7 @@ section {
 			display: flex;
 			flex-direction: column;
 			gap: 0.5rem;
-			margin: 2rem 0;
+			margin: 1rem 0;
 
 			h2 {
 				margin: 0;
@@ -72,6 +73,7 @@ section {
 
 			&.without-border {
 				border-left: 0;
+				padding-left: 0;
 			}
 		}
 	}
@@ -668,7 +670,7 @@ span.form-info {
 	}
 }
 
-button.with-icon {
+button.with-icon, .button.with-icon {
 	display: flex;
 	align-content: center;
 	padding-right: calc(0.5rem + $fa-fw);
@@ -694,35 +696,56 @@ button.with-padding {
 }
 
 .suspend-import-list {
+	.checkbox-list-wrapper {
+		overflow-x: auto;
+		display: grid;
+		gap: 1rem;
+	}
+
 	.checkbox-list {
-		.entry {
-			grid-template-columns: auto 25ch auto 1fr;
-			grid-template-rows: auto 1fr;
 
-			p {
-				grid-column: 4;
-				grid-row: 1 / span 2;
+		.header {
+			input[type="checkbox"] {
+				align-self: start;
+				height: 1.5rem;
 			}
 		}
-	}
 
-	.entry {
-		#icon {
-			margin-left: -0.5rem;
-			align-self: center;
-		}
+		.entry {
+			gap: 0;
+			width: 100%;
+			grid-template-columns: auto minmax(25ch, 2fr) minmax(40ch, 1fr);
+			grid-template-rows: auto 1fr;
 
-		#icon .already-blocked {
-			color: $green1;
-		}
+			input[type="checkbox"] {
+				margin-right: 1rem;
+			}
 
-		#icon .suggest-changes {
-			color: $orange2;
-		}
+			.domain-input {
+				margin-right: 0.5rem;
+				display: grid;
+				grid-template-columns: 1fr $fa-fw;
+				gap: 0.5rem;
 
-		p {
-			align-self: center;
-			margin: 0;
+				#icon {
+					align-self: center;
+	
+					.already-blocked {
+						color: $green1;
+					}
+		
+					.suggest-changes {
+						color: $orange2;
+					}
+				}
+			}
+
+			p {
+				align-self: center;
+				margin: 0;
+				grid-column: 4;
+				grid-row: 1 / span 2;
+			}
 		}
 	}
 }
@@ -750,6 +773,27 @@ button.with-padding {
 	}
 }
 
+@media screen and (max-width: 35rem) {
+	.import-export {
+		.button-grid {
+			grid-template-columns: auto auto;
+
+			b { /* filler item */
+				display: none;
+			}
+
+			& > * {
+				grid-column: 1 / span 2;
+				justify-self: start;
+			}
+
+			.export-file-button, .export-file {
+				grid-column: span 1;
+			}
+		}
+	}
+}
+
 .update-hints {
 	background: $list-entry-alternate-bg;
 	border: 0.1rem solid $border-accent;
@@ -769,29 +813,36 @@ button.with-padding {
 	}
 }
 
-.export-format-table {
-	width: 100%;
-	background: $list-entry-alternate-bg;
-	border-collapse: collapse;
+.export-format-table-wrapper {
+	overflow-x: auto;
 
-	th, td {
-		border: 0.1rem solid $gray1;
-		padding: 0.3rem;
-	}
-
-	th {
-		background: $list-entry-bg;
+	&, th, td {
+		border: 0.1rem solid $gray1 !important;
 	}
 
-	td {
-		text-align: center;
-
-		.fa-check {
-			color: $green1;
+	.export-format-table {
+		background: $list-entry-alternate-bg;
+		border-style: hidden;
+		border-collapse: collapse;
+	
+		th, td {
+			padding: 0.3rem;
 		}
-
-		.fa-times {
-			color: $error3;
+	
+		th {
+			background: $list-entry-bg;
+		}
+	
+		td {
+			text-align: center;
+	
+			.fa-check {
+				color: $green1;
+			}
+	
+			.fa-times {
+				color: $error3;
+			}
 		}
 	}
 }