Add styling to solution

client/src/components/content-blocks/Solution.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="solution" data-cy="solution">
-    <a data-cy="show-solution" @click="toggle">Lösung <span v-if="!visible">anzeigen</span><span v-if="visible">ausblenden</span></a>
-    <p class="solution-text" data-cy="solution-text" v-if="visible">
+    <a class="solution__toggle" data-cy="show-solution" @click="toggle">Lösung
+      <template v-if="!visible">anzeigen</template>
+      <template v-else>ausblenden</template>
+    </a>
+    <p class="solution__text" data-cy="solution-text" v-if="visible">
       {{value.text}}
     </p>
   </div>
@@ -24,3 +27,28 @@
     }
   }
 </script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .solution {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-row-gap: 15px;
+
+    &__toggle {
+      font-family: $sans-serif-font-family;
+      color: $color-grey;
+      font-size: toRem(15px);
+      /*margin-bottom: 15px;*/
+      display: block;
+      cursor: pointer;
+    }
+
+    &__text {
+      font-size: toRem(18px);
+      color: $color-grey;
+    }
+  }
+</style>

client/src/pages/room.vue

@@ -11,7 +11,12 @@
       </div>
     </div>
     <div class="room__content">
-      <add-room-entry-button :parent="room" v-if="room.id"></add-room-entry-button>
+      <add-room-entry-button :parent="room" v-if="room.id">
+        <!--
+        the v-if is there for the case where the room hasn't loaded yet, but there is already an attempt to create
+        a new room entry. mainly happens during cypress testing, but could also happen on a very slow connection
+        -->
+      </add-room-entry-button>
       <room-entry v-for="entry in room.roomEntries" v-bind="entry" :key="entry.id"></room-entry>
     </div>
   </div>

server/core/management/commands/dummy_data.py

@@ -84,7 +84,7 @@ module_1_chapter_1 = {
                 {
                     'type': 'solution',
                     'value': {
-                        'text': 'Dies ist ein Lösungssatz'
+                        'text': 'Dies ist ein Lösungssatz. Dies ist ein weiterer Lösungssatz. Dies ist noch ein Lösungssatz. Dies ist sogar noch einmal ein Lösungssatz. '
                     }
                 }
             ]