add responsive design

src/Generator.tsx

@@ -62,28 +62,30 @@ export default function Generator() {
         <div className="configurations">
           <h2>Configurations</h2>
 
-          <div className="option">
+          <div className="options">
-            <input
+            <section>
-              type="checkbox"
+              <div
-              checked={showChannelName}
+                className="option"
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                onClick={() => {
-                setShowChannelName(e.target.checked);
+                  setShowChannelName(!showChannelName);
                 }}
-            />
+              >
+                <input type="checkbox" checked={showChannelName} />
                 <label>Show channelname</label>
               </div>
 
-          <div className="option">
+              <div
-            <input
+                className="option"
-              type="checkbox"
+                onClick={() => {
-              checked={hideNonTalking}
+                  setHideNonTalking(!hideNonTalking);
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                setHideNonTalking(e.target.checked);
                 }}
-            />
+              >
+                <input type="checkbox" checked={hideNonTalking} />
                 <label>Hide non talking clients</label>
               </div>
+            </section>
 
+            <section>
               <div className="option">
                 <input
                   type="number"
@@ -107,6 +109,8 @@ export default function Generator() {
                 />
                 <label>RemoteApp-Port</label>
               </div>
+            </section>
+          </div>
         </div>
 
         <div className="preview">

src/styles/Generator.scss

@@ -1,6 +1,7 @@
 // Breakpoints
-$breakpoint-1: 760px;
+$breakpoint-1: 1200px;
-$breakpoint-2: 565px;
+$breakpoint-2: 790px;
+$breakpoint-3: 600px;
 
 @keyframes tooltipAnimation {
   0% {
@@ -22,7 +23,6 @@ $breakpoint-2: 565px;
   flex-direction: column;
   align-items: center;
   gap: 50px;
-  box-sizing: border-box;
   padding: 50px 0;
 
   .headline {
@@ -48,15 +48,8 @@ $breakpoint-2: 565px;
       background-color: #313136;
       border-radius: 5px;
       text-align: center;
-
-      @media screen and (max-width: $breakpoint-1) {
-        width: 300px;
     }
 
-      @media screen and (max-width: $breakpoint-2) {
-        width: 200px;
-      }
-    }
     .copy {
       padding: 5px 10px;
       border: 2px solid #31f39973;
@@ -81,6 +74,7 @@ $breakpoint-2: 565px;
       font-weight: bold;
     }
   }
+
   .generatorContent {
     display: flex;
     flex-direction: row;
@@ -89,25 +83,28 @@ $breakpoint-2: 565px;
     padding: 0 50px;
     gap: 30px;
     width: 100%;
-    box-sizing: border-box;
 
     .configurations {
       display: flex;
       flex-direction: column;
-      align-items: left;
+      align-items: center;
-      gap: 10px;
       height: 100%;
       flex: 1;
-    }
+      gap: 50px;
-    .preview {
+
-      flex: 1;
+      .options {
-      border: 2px solid #31f39973;
+        display: flex;
-      .viewer {
+        flex-direction: row;
-        background-image: url("/images/viewer_example_background.png");
+        align-items: center;
-        background-repeat: no-repeat;
+        gap: 100px;
-        background-size: cover;
+        user-select: none;
-        min-height: 500px;
+
-      }
+        section {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: left;
+          gap: 10px;
         }
 
         .option {
@@ -116,7 +113,7 @@ $breakpoint-2: 565px;
           align-items: center;
           justify-content: left;
           column-gap: 10px;
-
+          width: 100%;
           input {
             -webkit-appearance: none;
             -moz-appearance: none;
@@ -176,4 +173,57 @@ $breakpoint-2: 565px;
           }
         }
       }
+    }
+    .preview {
+      flex: 1;
+      border: 2px solid #31f39973;
+      .viewer {
+        background-image: url("/images/viewer_example_background.png");
+        background-repeat: no-repeat;
+        background-size: cover;
+        min-height: 500px;
+      }
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-1) {
+    .generatorContent {
+      flex-direction: column;
+
+      .preview {
+        width: 80%;
+      }
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-2) {
+    .output {
+      .url {
+        width: 300px;
+      }
+    }
+
+    .generatorContent {
+      .preview {
+        width: 100%;
+      }
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-3) {
+    .output {
+      .url {
+        width: 200px;
+      }
+    }
+
+    .generatorContent {
+      .configurations {
+        .options {
+          flex-direction: column;
+          gap: 30px;
+        }
+      }
+    }
+  }
 }

src/styles/Viewer.scss

@@ -4,7 +4,6 @@
   gap: 0 0;
   font-size: 3rem;
   color: white;
-  box-sizing: border-box;
   padding: 10px;
 
   h1,
@@ -17,6 +16,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 20ch;
+    user-select: none;
   }
   .channelNameContainer {
     display: flex;

src/styles/index.scss

@@ -4,18 +4,20 @@
   font-size: 1rem;
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 body,
 html {
-  height: 100vh;
+  min-height: 100vh;
-  width: 100vw;
+  min-width: 100%;
   display: flex;
+  overflow-x: hidden;
 }
 
 #root {
-  min-height: 100%;
+  height: 100%;
-  width: 100%;
+  min-width: 100%;
 }
 
 h1 {
@@ -61,7 +63,7 @@ button {
 // custom dark themed scrollbar
 ::-webkit-scrollbar {
   width: 5px;
-  height: 15px;
+  height: 5px;
 }
 
 ::-webkit-scrollbar-track {