From 553b8020fd52c1779b76b2c0034ea731243b6db6 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Tue, 1 Mar 2022 08:44:57 +0100
Subject: [PATCH] docs: fix styling issues on narrow screens

---
 .../UserFeedback/UserFeedback.stories.jsx     |  3 ++
 website/src/components/UserFeedback/index.jsx |  2 +-
 .../components/UserFeedback/styles.module.css |  9 ++---
 website/src/stories/header.css                | 38 +++++++++----------
 4 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/website/src/components/UserFeedback/UserFeedback.stories.jsx b/website/src/components/UserFeedback/UserFeedback.stories.jsx
index 37f4c28122..fc6132fb02 100644
--- a/website/src/components/UserFeedback/UserFeedback.stories.jsx
+++ b/website/src/components/UserFeedback/UserFeedback.stories.jsx
@@ -11,6 +11,9 @@ const Template = (args) => <FeedbackWrapper {...args} />;
 export const Step1 = Template.bind({});
 Step1.args = {
     open: true,
+    seedData: {
+        currentStep: 1,
+    },
 };
 
 export const Step2 = Template.bind({});
diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx
index 711e56cadb..c1153cdd55 100644
--- a/website/src/components/UserFeedback/index.jsx
+++ b/website/src/components/UserFeedback/index.jsx
@@ -360,7 +360,7 @@ export const FeedbackWrapper = ({ seedData, open }) => {
                     </div>
 
                     <div className={styles['button-container']}>
-                        <button type="submit">Submit feedback</button>
+                        <button type="submit">Submit</button>
                         <button
                             className={styles['button-secondary']}
                             type="button"
diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css
index cbd0325323..7b8dd0cbbe 100644
--- a/website/src/components/UserFeedback/styles.module.css
+++ b/website/src/components/UserFeedback/styles.module.css
@@ -30,6 +30,7 @@
 
 .user-feedback fieldset {
     border: none;
+    margin: 0;
     padding: 0;
     width: 100%;
 }
@@ -41,15 +42,12 @@
 .user-feedback button {
     border: none;
     border-radius: var(--ifm-global-radius);
-    padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+    padding: var(--ifm-spacing-vertical) calc(var(--ifm-spacing-horizontal) / 2);
 }
 
 .user-feedback form {
     /* max-width: 850px; */
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    transition: var(--fade-in-transition);
+    /* width: 100%; */
 }
 
 .user-feedback form > * + * {
@@ -238,4 +236,5 @@ button.close-button {
 .form-section-container > * {
     grid-column: 1;
     grid-row: 1;
+    transition: var(--fade-in-transition);
 }
diff --git a/website/src/stories/header.css b/website/src/stories/header.css
index 830610e6f2..e4a59d4b93 100644
--- a/website/src/stories/header.css
+++ b/website/src/stories/header.css
@@ -1,32 +1,32 @@
 .wrapper {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 15px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 svg {
-  display: inline-block;
-  vertical-align: top;
+    display: inline-block;
+    vertical-align: top;
 }
 
 h1 {
-  font-weight: 900;
-  font-size: 20px;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
+    font-weight: 900;
+    font-size: 20px;
+    line-height: 1;
+    margin: 6px 0 6px 10px;
+    display: inline-block;
+    vertical-align: top;
 }
 
-button + button {
-  margin-left: 10px;
+.wrapper button + button {
+    margin-left: 10px;
 }
 
 .welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
+    color: #333;
+    font-size: 14px;
+    margin-right: 10px;
 }