[frontend/fix] Mobile css tweaks (#1605)

* mobile css tweaks

* bulk process list mobile css

web/source/css/base.css

@@ -66,8 +66,8 @@ body {
 	display: grid;
 	min-height: 100vh;
 
-	grid-template-columns: auto minmax(auto, 50rem) auto;
-	grid-template-columns: auto min(92%, 50rem) auto;
+	grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
+	grid-template-columns: 1fr min(92%, 50rem) 1fr;
 	grid-template-rows: auto 1fr auto;
 }
 

web/source/settings/admin/federation/import-export/export-format-table.jsx

@@ -22,6 +22,7 @@ const React = require("react");
 
 module.exports = function ExportFormatTable() {
 	return (
+		<div className="export-format-table-wrapper without-border">
 			<table className="export-format-table">
 				<thead>
 					<tr>
@@ -42,6 +43,7 @@ module.exports = function ExportFormatTable() {
 					<Format name="CSV" info={[true, true, true, true]} />
 				</tbody>
 			</table>
+		</div>
 	);
 };
 

web/source/settings/admin/federation/import-export/form.jsx

@@ -77,7 +77,8 @@ module.exports = function ImportExportForm({ form, submitParse, parseResult }) {
 						result={parseResult}
 						showError={false}
 					/>
-					<label className="button">
+					<label className="button with-icon">
+						<i class="fa fa-fw " aria-hidden="true" />
 						Import file
 						<input
 							type="file"
@@ -93,7 +94,14 @@ module.exports = function ImportExportForm({ form, submitParse, parseResult }) {
 						onClick={() => submitExport("export")}
 						result={exportResult} showError={false}
 					/>
-					<MutationButton label="Export to file" type="button" onClick={() => submitExport("export-file")} result={exportResult} showError={false} />
+					<MutationButton
+						label="Export to file"
+						wrapperClassName="export-file-button"
+						type="button"
+						onClick={() => submitExport("export-file")}
+						result={exportResult}
+						showError={false}
+					/>
 					<div className="export-file">
 						<span>
 							as

web/source/settings/admin/federation/import-export/process.jsx

@@ -127,11 +127,13 @@ function ImportList({ list, data: blockedInstances }) {
 					} />
 				}
 
+				<div className="checkbox-list-wrapper">
 					<DomainCheckList
 						field={form.domains}
 						blockedInstances={blockedInstances}
 						commentType={showComment.value}
 					/>
+				</div>
 
 				<TextArea
 					field={form.privateComment}
@@ -182,7 +184,6 @@ function DomainCheckList({ field, blockedInstances, commentType }) {
 				field={field}
 				header={<>
 					<b>Domain</b>
-					<b></b>
 					<b>
 						{commentType == "public_comment" && "Public comment"}
 						{commentType == "private_comment" && "Private comment"}
@@ -287,6 +288,7 @@ function DomainEntry({ entry, onChange, extraProps: { alreadyExists, comment } }
 
 	return (
 		<>
+			<div className="domain-input">
 				<TextInput
 					field={domainField}
 					onChange={(e) => {
@@ -297,6 +299,7 @@ function DomainEntry({ entry, onChange, extraProps: { alreadyExists, comment } }
 				<span id="icon" onClick={clickIcon}>
 					<DomainEntryIcon alreadyExists={alreadyExists} suggestion={entry.suggest} onChange={onChange} />
 				</span>
+			</div>
 			<p>{comment}</p>
 		</>
 	);
@@ -320,7 +323,7 @@ function DomainEntryIcon({ alreadyExists, suggestion }) {
 
 	return (
 		<>
-			<i className={`fa ${icon}`} aria-hidden="true" title={text}></i>
+			<i className={`fa fa-fw ${icon}`} aria-hidden="true" title={text}></i>
 			<span className="sr-only">{text}</span>
 		</>
 	);

web/source/settings/components/form/mutation-button.jsx

@@ -21,7 +21,7 @@
 const React = require("react");
 const { Error } = require("../error");
 
-module.exports = function MutationButton({ label, result, disabled, showError = true, className = "", ...inputProps }) {
+module.exports = function MutationButton({ label, result, disabled, showError = true, className = "", wrapperClassName = "", ...inputProps }) {
 	let iconClass = "";
 	const targetsThisButton = result.action == inputProps.name; // can also both be undefined, which is correct
 
@@ -33,7 +33,7 @@ module.exports = function MutationButton({ label, result, disabled, showError =
 		}
 	}
 
-	return (<div>
+	return (<div className={wrapperClassName}>
 		{(showError && targetsThisButton && result.error) &&
 			<Error error={result.error} />
 		}

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 {
+
+		.header {
+			input[type="checkbox"] {
+				align-self: start;
+				height: 1.5rem;
+			}
+		}
+
 		.entry {
-			grid-template-columns: auto 25ch auto 1fr;
+			gap: 0;
+			width: 100%;
+			grid-template-columns: auto minmax(25ch, 2fr) minmax(40ch, 1fr);
 			grid-template-rows: auto 1fr;
 
-			p {
-				grid-column: 4;
-				grid-row: 1 / span 2;
-			}
-		}
+			input[type="checkbox"] {
+				margin-right: 1rem;
 			}
 
-	.entry {
+			.domain-input {
+				margin-right: 0.5rem;
+				display: grid;
+				grid-template-columns: 1fr $fa-fw;
+				gap: 0.5rem;
+
 				#icon {
-			margin-left: -0.5rem;
 					align-self: center;
-		}
 	
-		#icon .already-blocked {
+					.already-blocked {
 						color: $green1;
 					}
 		
-		#icon .suggest-changes {
+					.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,13 +813,19 @@ button.with-padding {
 	}
 }
 
-.export-format-table {
-	width: 100%;
+.export-format-table-wrapper {
+	overflow-x: auto;
+
+	&, th, td {
+		border: 0.1rem solid $gray1 !important;
+	}
+
+	.export-format-table {
 		background: $list-entry-alternate-bg;
+		border-style: hidden;
 		border-collapse: collapse;
 	
 		th, td {
-		border: 0.1rem solid $gray1;
 			padding: 0.3rem;
 		}
 	
@@ -794,6 +844,7 @@ button.with-padding {
 				color: $error3;
 			}
 		}
+	}
 }
 
 .form-field.radio {