Improve cookie banner display on mobile

src/app/core/components/cookie-banner/cookie-banner.component.html

@@ -48,9 +48,6 @@
           <p i18n="@@cookieModal.tab1title">Why do we use cookies?</p>
         </div>
         <div class="tab" (click)='toggleTab(1)' [ngClass]="{'tab-active' : tab === 1}">
-          <svg class="circle" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="5.5" cy="5.5" r="5.5" fill="#3C8225" />
-          </svg>
           <p i18n="@@cookieModal.tab2title">Necessary cookies</p>
         </div>
       </div>

src/app/core/components/cookie-banner/cookie-banner.component.scss

@@ -110,13 +110,15 @@
   .box {
     width: 100%;
     max-width: 600px;
-    min-height: 360px;
+    min-height: 400px;
     background: #FFFFFF;
     box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.55);
     position: relative;
 
     @media screen and(max-width: $tablet) {
-      margin: 95%;
+      width: calc(100% - 50px);
+      height: 450px;
+      max-width: unset;
     }
 
     .title {
@@ -139,7 +141,7 @@
 
     .content {
       display: flex;
-      height: 100%;
+      height: calc(450px - 53px); // minus the height of the popup header
 
       @media screen and(max-width: $tablet) {
         flex-direction: column;
@@ -152,6 +154,7 @@
 
         @media screen and(max-width: $tablet) {
           width: 100%;
+          display: flex;
         }
 
         .tab {
@@ -160,6 +163,14 @@
           border-bottom: 1px solid #B4B4B4;
           position: relative;
 
+          @media screen and(max-width: $tablet) {
+            width: 50%;
+
+            &:not(:last-of-type) {
+              border-right: 1px solid $grey-super-light-color;
+            }
+          }
+
           p {
             display: inline-block;
           }
@@ -173,15 +184,32 @@
         .tab-active {
           background: white;
 
-          //remove border
-          &:after {
-            content: '';
-            height: 100%;
-            width: 2px;
-            position: absolute;
-            right: -2px;
-            top: 0;
-            background: white;
+          @media screen and(max-width: $tablet) {
+
+            //remove border
+            &:after {
+              content: '';
+              height: 2px;
+              width: 100%;
+              position: absolute;
+              bottom: -2px;
+              left: 0;
+              background: white;
+            }
+          }
+
+          @media screen and(min-width: $tablet) {
+
+            //remove border
+            &:after {
+              content: '';
+              height: 100%;
+              width: 2px;
+              position: absolute;
+              right: -2px;
+              top: 0;
+              background: white;
+            }
           }
         }
       }
@@ -191,6 +219,7 @@
         border-left: 1px solid #B4B4B4;
         padding: 1.3rem 1rem;
         background-color: #fff;
+        overflow: auto;
 
         @media screen and(max-width: $tablet) {
           width: 100%;