Style updates

static/css/style.css

@@ -693,35 +693,73 @@ form label {
     align-items: center !important;
 }
 
+.d-flex-justify-between {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+}
+
 #faqContainer .oh-faq__item-body {
     background: #e9dfec9c;
     opacity: 0.7;
 }
-#faqContainer .oh-faq__tag {
+
+.oh-faq__tag {
     border-radius: 10px;
     font-weight: 600;
 }
+
 #faqContainer .oh-faq__item-body {
     max-height: 0;
-    transition: max-height 0.3s ease,padding 0.3s ease;
+    transition: max-height 0.3s ease, padding 0.3s ease;
     overflow-y: auto;
 }
 
 #faqContainer .oh-faq__item--show .oh-faq__item-body {
-    max-height: 200px; /* Adjust the max-height as needed */
-}
-#faqContainer .oh-title_faq__main-header {
-    width:70%;
-}
-#faqContainer .oh-select-faq {
-    width:12%;
-}
-#faqContainer .oh-select-faq , .oh-select-faq:last-child , .oh-faq__input-search {
-    margin :1rem 0;
+    max-height: 200px;
+    /* Adjust the max-height as needed */
 }
 
-#faqContainer h1.oh-main__titlebar-title{
-    margin-bottom:0;
+#faqContainer .oh-title_faq__main-header {
+    width: 70%;
+}
+
+#faqContainer .oh-select-faq {
+    width: 12%;
+}
+
+#faqContainer .oh-select-faq,
+.oh-select-faq:last-child,
+.oh-faq__input-search {
+    margin: 1rem 0;
+}
+
+#faqContainer h1.oh-main__titlebar-title {
+    margin-bottom: 0;
+}
+
+#faqContainer .oh-faq_search--icon {
+    top: 17px;
+}
+
+.truncated-text {
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.truncated-text::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(to bottom,
+            rgba(255, 255, 255, 0),
+            rgba(255, 255, 255, 1) 80%);
+    pointer-events: none;
 }
 #faqContainer .oh-faq_search--icon{
     top:17px;