From fa497c08d07b8a25d0c3b6c646854e44221e409b Mon Sep 17 00:00:00 2001
From: Nikita Karamov <me@kytta.dev>
Date: Sat, 20 Jan 2024 16:34:32 +0100
Subject: [PATCH] Improve CSS support for non-tbltr scripts

---
 src/components/instance-select.astro |  7 +++++--
 src/styles/main.scss                 | 21 +++++++++++----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/instance-select.astro b/src/components/instance-select.astro
index 26b70ae..7b8e42c 100644
--- a/src/components/instance-select.astro
+++ b/src/components/instance-select.astro
@@ -15,7 +15,10 @@ const { instance, errors } = Astro.props;
 	data-translate="instance"
 >
 	Fediverse instance
-	<div class="instance-input">
+	<div
+		class="instance-input"
+		dir="ltr"
+	>
 		<span id="https-label">https://</span>
 		<input
 			type="text"
@@ -90,7 +93,7 @@ const { instance, errors } = Astro.props;
 	}
 
 	#saved-instances {
-		margin-bottom: 1rem;
+		margin-block-end: 1rem;
 
 		> div {
 			display: inline-block;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index be7374e..5d5ec66 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -39,7 +39,8 @@ html {
 
 body {
 	max-width: 60em;
-	margin: 0 auto;
+	margin-block: 0;
+	margin-inline: auto;
 	display: flex;
 	flex-flow: row wrap;
 
@@ -55,19 +56,16 @@ header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-
-	> div {
-		text-align: right;
-	}
 }
 
 main {
-	margin-bottom: 2rem;
+	margin-block-end: 2rem;
 }
 
 main,
 aside {
-	padding: 0 1rem;
+	padding-block: 0;
+	padding-inline: 1rem;
 }
 
 hr {
@@ -110,6 +108,7 @@ textarea {
 
 textarea {
 	resize: vertical;
+	resize: block;
 }
 
 input[type="text"],
@@ -130,7 +129,8 @@ input[type="submit"] {
 	color: var(--s2f-button-text-color);
 	font-weight: bolder;
 	height: 2.5rem;
-	padding: 0.5rem 1.5rem;
+	padding-block: 0.5rem;
+	padding-inline: 1.5rem;
 	border: 0;
 	cursor: pointer;
 	appearance: button;
@@ -175,9 +175,10 @@ input[type="submit"] {
 
 p.error {
 	color: var(--s2f-error-color);
-	margin: 0 0 1rem;
+	margin-block: 0 1rem;
+	margin-inline: 0;
 }
 
 .mt1r {
-	margin-top: 1rem !important;
+	margin-block-start: 1rem !important;
 }