feat: optimize new event switch for small screens

src/app/user-area/pages/events/events.component.html

@@ -2,7 +2,7 @@
     <div class="d-flex options">
         <div class="option">
             <h2>Cuntinuar cun s’annunziar</h2>
-            <p class="mt-4 mb-5">
+            <p class="mt-4 mb-5 description-text">
                 Ti pos adina puspè actualisar/midar tia occurrenza.
             </p>
 
@@ -12,7 +12,7 @@ <h2>Cuntinuar cun s’annunziar</h2>
         </div>
         <div class="option">
             <h2>Cuntinuar senza s’annunziar</h2>
-            <p class="mt-4 mb-5">
+            <p class="mt-4 mb-5 description-text">
                 Ti na pos pli tard betg pli midar tia occurrenza.
             </p>
 

src/app/user-area/pages/events/events.component.scss

@@ -1,22 +1,48 @@
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+
 .options {
-    padding-top: 4rem;
+    flex-direction: column;
+    padding-top: 25px;
+
+    @include media-breakpoint-up(md) {
+        padding-top: 4rem;
+        flex-direction: row;
+    }
 }
 
 .option {
     flex-basis: 50%;
     flex-grow: 1;
     flex-shrink: 1;
 
-    &:nth-of-type(1) {
-        padding-right: 20px;
-        border-right: 1px solid #BBBFC2;
+    &:nth-of-type(2) {
+        border-top: 1px solid #BBBFC2;
+        margin-top: 25px;
+        padding-top: 25px;
     }
 
-    &:nth-of-type(2) {
-        padding-left: 20px;
+    @include media-breakpoint-up(md) {
+        &:nth-of-type(1) {
+            padding-right: 20px;
+            border-right: 1px solid #BBBFC2;
+        }
+
+        &:nth-of-type(2) {
+            padding-left: 20px;
+            border-top: none;
+            margin-top: 0;
+            padding-top: 0;
+        }
     }
 
+
     h2 {
         font-size: 1.5rem;
     }
+
+    .description-text {
+        min-height: 50px;
+    }
 }