fixed responsive layout for sign up page

added `changesetBaseRefs` to `.yarnrc.yml`

.yarnrc.yml

@@ -11,3 +11,7 @@ plugins:
 pnpMode: loose
 
 yarnPath: .yarn/releases/yarn-3.0.0.cjs
+
+changesetBaseRefs:
+  - "main"
+  - "origin/main"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby",
   "description": "The transparent, distributed video sharing platform.",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "license": "AGPL-3.0",
   "private": true,
   "main": "./dist/server.prod.js",

src/layout/SignUp/Fields/Fields.module.scss

@@ -12,7 +12,8 @@
 .Form {
   display: flex;
   gap: spacing(3);
-  align-items: flex-end;
+  align-items: stretch;
+  flex-direction: column;
 }
 
 .Fields {
@@ -57,3 +58,10 @@
   }
 }
 
+
+@include screen(500px) {
+  .Form {
+    align-items: flex-end;
+    flex-direction: row;
+  }
+}

src/layout/SignUp/Heading/Heading.module.scss

@@ -3,4 +3,3 @@
 .Heading {
   margin-bottom: spacing(2);
 }
-

src/layout/SignUp/Layout/Layout.module.scss

@@ -3,7 +3,18 @@
 .Layout {
   max-width: rem(2000px);
   margin: 0 auto;
-  padding-top: rem(250px);
-  padding-left: rem(100px);
+  padding-top: rem(200px);
 }
 
+@include screen(500px) {
+  .Layout {
+    padding-left: rem(25px);
+    padding-top: rem(250px);
+  }
+}
+
+@include screen(1000px) {
+  .Layout {
+    padding-left: rem(100px);
+  }
+}