From 1d73f871f223b6838337aaa63ea5b3263d90f7d1 Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajat@forem.com>
Date: Thu, 21 Sep 2023 16:37:44 +0530
Subject: [PATCH] Janky bug fix (#20147)

---
 .../stylesheets/preact/onboarding-modal.scss  | 19 ++++++++++++++-----
 .../onboarding/components/FollowTags.jsx      |  2 +-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/preact/onboarding-modal.scss b/app/assets/stylesheets/preact/onboarding-modal.scss
index 1bd0a8d10..26dae99c1 100644
--- a/app/assets/stylesheets/preact/onboarding-modal.scss
+++ b/app/assets/stylesheets/preact/onboarding-modal.scss
@@ -33,6 +33,11 @@
   min-height: 100%;
   overflow: auto;
 
+  &__tags {
+    min-height: auto;
+    margin-bottom: 100px;
+  }
+
   @media screen and (min-width: $breakpoint-s) {
     justify-content: center;
     padding: var(--su-8);
@@ -112,22 +117,26 @@
 }
 
 .onboarding-email-digest {
+  position: absolute;
+  bottom: 112px;
+  left: var(--su-4);
+  width: calc(100% - 2 * var(--su-4));
   z-index: 1;
-  display: flex;
-  margin: 0px var(--su-4) var(--su-4) var(--su-4);
   align-items: center;
   border-radius: 0px 6px 6px 0px;
   border: 1px solid rgba(var(--tag-onboarding-border), 1);
   background-color: var(--card-secondary-bg);
 
   @media screen and (min-width: $breakpoint-s) {
-    margin: 0px var(--su-8) 40px var(--su-8);
+    left: var(--su-8);
+    width: calc(100% - 2 * var(--su-8));
   }
 
   &__rectangle {
+    position: absolute;
     width: 4px;
-    height: 100%;
-    flex-shrink: 0;
+    top: 0;
+    bottom: 0;
     background: rgba(var(--accent-brand-rgb), 1);
   }
 }
diff --git a/app/javascript/onboarding/components/FollowTags.jsx b/app/javascript/onboarding/components/FollowTags.jsx
index a360df468..ecef1592d 100644
--- a/app/javascript/onboarding/components/FollowTags.jsx
+++ b/app/javascript/onboarding/components/FollowTags.jsx
@@ -156,7 +156,7 @@ export class FollowTags extends Component {
           aria-labelledby="title"
           aria-describedby="subtitle"
         >
-          <div className="onboarding-content toggle-bottom">
+          <div className="onboarding-content onboarding-content__tags toggle-bottom ">
             <header className="onboarding-content-header">
               <h1 id="title" className="title">
                 What are you interested in?