Clean up SCSS

client/src/components/ContentBlockChooserWidget.vue

@@ -62,6 +62,7 @@
     border-radius: 12px;
     margin-top: 20px;
     position: relative;
+    margin-bottom: 20px;
 
     &::before {
       content: "";

client/src/components/ContentBlockTitleInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content-block-title-input">
-    <input placeholder="Titel für Inhaltsblock erfassen" class="content-block-title-input__inputfield"/>
+    <input placeholder="Titel für Inhaltsblock erfassen" class="content-block-title-input__inputfield skillbox-input">
   </div>
 </template>
 
@@ -9,13 +9,7 @@
 
   .content-block-title-input {
     &__inputfield {
-      display: flex;
-      width: 100%;
-      padding: 16px;
-      box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
-      border-radius: 4px;
-      box-sizing: border-box;
-      border: 1px solid $color-lightgrey;
+      width: $modal-input-width;
     }
   }
 </style>

client/src/components/Modal.vue

@@ -42,6 +42,7 @@
     display: grid;
     grid-template-rows: auto 1fr 65px;
     grid-template-areas: "header" "body" "footer";
+    position: relative;
 
     &__backdrop {
       display: grid;
@@ -56,19 +57,20 @@
 
     &__header {
       grid-area: header;
-      padding: 10px 30px;
+      padding: 10px $modal-lateral-padding;
       border-bottom: 1px solid $color-lightgrey;
     }
 
     &__body {
       grid-area: body;
-      padding: 10px 34px;
+      padding: 10px $modal-lateral-padding;
+      overflow: auto;
     }
 
     &__footer {
       grid-area: footer;
       border-top: 1px solid $color-lightgrey;
-      padding: 16px 30px;
+      padding: 16px $modal-lateral-padding;
     }
   }
 </style>

client/src/styles/_forms.scss

@@ -0,0 +1,9 @@
+.skillbox-input {
+  display: flex;
+  padding: 16px;
+  box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid $color-lightgrey;
+  max-width: 100%;
+}

client/src/styles/_variables.scss

@@ -42,3 +42,10 @@ $base-font-size-pixels: 16px; // used to calculate rem
 $red: #FA5F5F;
 $green: #6DD79A;
 $brown: #EB9E77;
+
+
+
+
+//modal stuff
+$modal-lateral-padding: 34px;
+$modal-input-width: 500px;

client/src/styles/main.scss

@@ -7,6 +7,7 @@
 @import "typography";
 @import "variables";
 @import "buttons";
+@import "forms";