From 9af6a5a7e5fb562eb36e6b31677f0ca4f955d5f1 Mon Sep 17 00:00:00 2001
From: pixel <pixel+github@chrissx.de>
Date: Wed, 31 Jan 2024 02:41:03 +0100
Subject: [PATCH] Rewind: make the settings a bit more accessible on smol
 screens

---
 src/components/Input.tsx         |  2 +-
 src/components/Kink.tsx          |  2 +-
 src/components/Rewind.module.css | 11 ++++++++++-
 src/components/Rewind.tsx        |  2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 9a0fc25..db84d0b 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -5,6 +5,6 @@ export default function Input({ error, placeholder, value, setValue, className }
     return <div className={className}>
         <input type="text" spellcheck={false} autocorrect="false"
             placeholder={placeholder} value={value} onInput={(e) => setValue(e.target.value)} />
-        <span style={{ color: "red" }}>{error}</span>
+        {error && <span style={{ color: "red" }}>{error}</span>}
     </div>;
 }
diff --git a/src/components/Kink.tsx b/src/components/Kink.tsx
index 5f1b1da..77257f2 100644
--- a/src/components/Kink.tsx
+++ b/src/components/Kink.tsx
@@ -8,7 +8,7 @@ export default function Kink({ kink: [kink, positions, , description], ratings,
         <tr class={styles.tr}>
             <td class={styles.td}>
                 <span>{kink}</span>
-                <span class={styles.desc}>{description}</span>
+                {description && <span class={styles.desc}>{description}</span>}
             </td>
             {positions.map((pos, p) => (
                 <td class={styles.td}>
diff --git a/src/components/Rewind.module.css b/src/components/Rewind.module.css
index f7167f1..47b8085 100644
--- a/src/components/Rewind.module.css
+++ b/src/components/Rewind.module.css
@@ -13,12 +13,21 @@
 }
 
 .settings {
-    flex-wrap: wrap;
+    display: flex;
+    flex-flow: row wrap;
     width: 63.2em;
     justify-content: space-between;
     padding: 1em 0;
 }
 
+@media screen and (width <= 600px) {
+    .settings {
+        flex-direction: column;
+        font-size: 2.5em;
+        width: 25.28em;
+    }
+}
+
 .sexrewind {
     width: 7.5em;
     height: 7.5em;
diff --git a/src/components/Rewind.tsx b/src/components/Rewind.tsx
index 50c0420..f9e63e7 100644
--- a/src/components/Rewind.tsx
+++ b/src/components/Rewind.tsx
@@ -8,7 +8,7 @@ export default function Rewind() {
     const [sexmins, setSexmins] = useState("0");
     const [sexpartners, setSexpartners] = useState("0");
     return <main class={styles.main}>
-        <div class={styles.settings + " " + styles.row}>
+        <div class={styles.settings}>
             <Input placeholder="You had sex" value={sextimes} setValue={setSextimes} />
             <Input placeholder="Description" value={sexdesc} setValue={setSexdesc} />
             <Input placeholder="Minutes had sex" value={sexmins} setValue={setSexmins} />