From 4ec0211590484ac778dd4a54d60e2a47fd5c950e Mon Sep 17 00:00:00 2001
From: Gion-Andri Cantieni <gion-andri@gmx.ch>
Date: Thu, 9 Nov 2023 09:31:04 +0100
Subject: [PATCH] feat: optimize new event switch for small screens

---
 .../pages/events/events.component.html        |  4 +-
 .../pages/events/events.component.scss        | 38 ++++++++++++++++---
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/app/user-area/pages/events/events.component.html b/src/app/user-area/pages/events/events.component.html
index 7d8cad4..917c166 100644
--- a/src/app/user-area/pages/events/events.component.html
+++ b/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>
 
diff --git a/src/app/user-area/pages/events/events.component.scss b/src/app/user-area/pages/events/events.component.scss
index 69b883b..07a5b08 100644
--- a/src/app/user-area/pages/events/events.component.scss
+++ b/src/app/user-area/pages/events/events.component.scss
@@ -1,5 +1,15 @@
+@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 {
@@ -7,16 +17,32 @@
     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;
+    }
 }