From a629c36fe7530fed8a97e879396ba2e13583937d Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Sun, 27 Feb 2022 19:40:14 +0100
Subject: [PATCH] feat: hide 'very unsatisfied'/'very satisfied' on smaller
 sreens

---
 website/src/components/UserFeedback/index.jsx | 74 +++++++++++--------
 .../components/UserFeedback/styles.module.css | 25 +++++++
 2 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx
index f12d0eb8ce..1bbf6e22dd 100644
--- a/website/src/components/UserFeedback/index.jsx
+++ b/website/src/components/UserFeedback/index.jsx
@@ -106,37 +106,49 @@ export const FeedbackWrapper = ({ seedData }) => {
                 </p>
 
                 <div className={styles['satisfaction-input-container']}>
-                    <span aria-hidden="true">Very unsatisfied</span>
-                    {[1, 2, 3, 4, 5].map((n) => (
-                        <span key={`input-group-${n}`}>
-                            <input
-                                className={join(
-                                    'visually-hidden',
-                                    styles['user-satisfaction-score-input'],
-                                )}
-                                required
-                                id={`user-satisfaction-score-${n}`}
-                                name="satisfaction-level"
-                                type="radio"
-                                value={n}
-                                defaultChecked={n === state.data.score}
-                                onChange={(e) => {
-                                    const value = parseInt(e.target.value);
-                                    console.log('the value is', value);
-                                    setNewValue(value);
-                                }}
-                            />
-                            <label
-                                className={
-                                    styles['user-satisfaction-score-label']
-                                }
-                                htmlFor={`user-satisfaction-score-${n}`}
-                            >
-                                {n}
-                            </label>
-                        </span>
-                    ))}
-                    <span aria-hidden="true">Very satisfied</span>
+                    <span
+                        aria-hidden="true"
+                        className={styles['satisfaction-input-visual-label']}
+                    >
+                        Very unsatisfied
+                    </span>
+                    <span className={styles['satisfaction-input-inputs']}>
+                        {[1, 2, 3, 4, 5].map((n) => (
+                            <span key={`input-group-${n}`}>
+                                <input
+                                    className={join(
+                                        'visually-hidden',
+                                        styles['user-satisfaction-score-input'],
+                                    )}
+                                    required
+                                    id={`user-satisfaction-score-${n}`}
+                                    name="satisfaction-level"
+                                    type="radio"
+                                    value={n}
+                                    defaultChecked={n === state.data.score}
+                                    onChange={(e) => {
+                                        const value = parseInt(e.target.value);
+                                        console.log('the value is', value);
+                                        setNewValue(value);
+                                    }}
+                                />
+                                <label
+                                    className={
+                                        styles['user-satisfaction-score-label']
+                                    }
+                                    htmlFor={`user-satisfaction-score-${n}`}
+                                >
+                                    {n}
+                                </label>
+                            </span>
+                        ))}
+                    </span>
+                    <span
+                        aria-hidden="true"
+                        className={styles['satisfaction-input-visual-label']}
+                    >
+                        Very satisfied
+                    </span>
                 </div>
                 <div className={styles['button-container']}>
                     <button
diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css
index 6b7fbb76db..11a4c2abb6 100644
--- a/website/src/components/UserFeedback/styles.module.css
+++ b/website/src/components/UserFeedback/styles.module.css
@@ -43,11 +43,36 @@
 
 .satisfaction-input-container {
     display: flex;
+    flex-flow: wrap;
     place-content: center;
     align-items: center;
     gap: var(--element-horizontal-gap);
 }
 
+.satisfaction-input-inputs {
+    display: flex;
+    flex-flow: wrap;
+    place-content: center;
+    align-items: center;
+    gap: var(--element-horizontal-gap);
+}
+
+.satisfaction-input-visual-label {
+    display: none;
+}
+
+@media screen and (min-width: 800px) {
+    .satisfaction-input-visual-label {
+        display: inline;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .satisfaction-input-inputs {
+        gap: calc(var(--element-horizontal-gap) / 2);
+    }
+}
+
 .user-satisfaction-score-label {
     display: grid;
     place-content: center;