From 6b4e637b9afac7c93b51b1fa9a892a06330d07c2 Mon Sep 17 00:00:00 2001
From: varun_divya <divya_varun@med.unc.edu>
Date: Mon, 3 Nov 2025 16:41:07 -0500
Subject: [PATCH] Patient & Clinical Resources: UI Clean-Up

---
 frontend/src/global/variables.scss            |  2 +-
 .../pages/node/SectionClinicalReources.vue    | 37 ++++++++++---------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/frontend/src/global/variables.scss b/frontend/src/global/variables.scss
index 319852608..4cdc074e0 100644
--- a/frontend/src/global/variables.scss
+++ b/frontend/src/global/variables.scss
@@ -11,7 +11,7 @@ $off-black: #404040;
 $black: #000000;
 $success: $theme;
 $error: #fe3e5e;
-
+$light-blue: #f7fbfe;
 /** transitions */
 $fast: 0.2s ease;
 
diff --git a/frontend/src/pages/node/SectionClinicalReources.vue b/frontend/src/pages/node/SectionClinicalReources.vue
index 1f2afe4f8..ef222c4d9 100644
--- a/frontend/src/pages/node/SectionClinicalReources.vue
+++ b/frontend/src/pages/node/SectionClinicalReources.vue
@@ -26,27 +26,29 @@
 
       <div class="sub-items">
         <div v-if="node?.inheritance">
-          <span class="info-label"> Heritability : </span>
-          <AppLink
-            v-tooltip="node?.inheritance?.name"
-            :to="node?.inheritance?.id || ''"
-            >{{ node?.inheritance?.name }}</AppLink
-          >
+          <span> Heritability : </span>
+          <AppFlex align-h="left" gap="small">
+            <AppLink
+              v-tooltip="node?.inheritance?.name"
+              :to="node?.inheritance?.id || ''"
+              >{{ node?.inheritance?.name }}</AppLink
+            >
+          </AppFlex>
         </div>
 
         <div v-if="node?.causal_gene?.length">
-          <span class="info-label"> Casual Genes : </span>
-          <div class="causal-gene">
+          <span> Casual Genes : </span>
+          <AppFlex align-h="left" gap="small">
             <AppNodeBadge
               v-for="(gene, index) in node?.causal_gene"
               :key="index"
               :node="omit(gene, 'in_taxon_label')"
             />
-          </div>
+          </AppFlex>
         </div>
 
         <div>
-          <span class="info-label"> Frequency : </span>
+          <span> Frequency : </span>
           <span>{{ frequencyLabel }}</span>
         </div>
       </div>
@@ -101,7 +103,8 @@ const brandText = (id: string, fallback?: string) => {
   width: 100%;
   padding: 1em;
   gap: 1.5em;
-  background-color: #f7fbfe;
+  border: 1px solid $light-gray;
+  background-color: $light-blue;
 }
 .custom-grid {
   display: flex;
@@ -114,7 +117,7 @@ const brandText = (id: string, fallback?: string) => {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  gap: 0.4em;
+  gap: 0.9em;
 }
 
 .linkout {
@@ -154,10 +157,10 @@ const brandText = (id: string, fallback?: string) => {
   line-height: 1;
   opacity: 0.75;
 }
-.causal-gene {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.4em;
+.causal-genes {
+  display: inline-flex !important;
+  flex-wrap: wrap; /* wrap to next line when needed */
+  gap: 0.8em;
+  vertical-align: middle;
 }
 </style>