From 98e40988b14f5afbd26b29a77131cf4e0cb2e7d6 Mon Sep 17 00:00:00 2001
From: swapnamol-abraham <swapnamol.abraham@nhs.net>
Date: Mon, 19 May 2025 13:46:05 +0100
Subject: [PATCH] TD-5608: Fixed the radiobutton alignment issues

---
 .../ContributeProvideByTab.vue                | 42 ++++++++++++++++++-
 .../vuesrc/contribute/ContentCommon.vue       | 38 ++++++++++++++++-
 .../Styles/nhsuk/common.scss                  | 36 ----------------
 3 files changed, 78 insertions(+), 38 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
index 34383955e..a177d7002 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
@@ -125,5 +125,45 @@
         filter: grayscale(0) !important;
     }
 
- 
+    label {
+           display: inline-flex;
+           align-items: center;
+           gap: 5px; /* space between radio and text */
+    }
+    /*Add a background color to the radio button when focused */
+    .radio-button:focus {
+        box-shadow: 0 0 0 4px $nhsuk-yellow !important;
+        outline: 0;
+        //box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
+    }
+
+    .radio-button {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 24px;
+        height: 24px;
+        border: 2px solid black;
+        border-radius: 50%;
+        position: relative;
+        cursor: pointer;
+        transition: box-shadow 0.3s;
+        outline: none;
+    }
+
+    /* Yellow glow on focus */
+    .radio-button:focus {
+        box-shadow: 0 0 0 4px $nhsuk-yellow; /* yellow circle */
+    }
+
+    /* Inner black dot when selected */
+    .radio-button:checked::before {
+        content: "";
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 12px;
+        height: 12px;
+        background-color: black;
+        border-radius: 50%;
+    }
 </style>
\ No newline at end of file
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
index 0c4605f69..338817b8b 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
@@ -610,5 +610,41 @@
            gap: 5px; /* space between radio and text */
            margin: 7px;
     }
-                              
+    /*Add a background color to the radio button when focused */
+    .radio-button:focus {
+        box-shadow: 0 0 0 4px $nhsuk-yellow !important;
+        outline: 0;
+        //box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
+    }
+
+    .radio-button {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 24px;
+        height: 24px;
+        border: 2px solid black;
+        border-radius: 50%;
+        position: relative;
+        cursor: pointer;
+        transition: box-shadow 0.3s;
+        outline: none;
+    }
+
+    /* Yellow glow on focus */
+    .radio-button:focus {
+        box-shadow: 0 0 0 4px $nhsuk-yellow; /* yellow circle */
+    }
+
+    /* Inner black dot when selected */
+    .radio-button:checked::before {
+        content: "";
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 12px;
+        height: 12px;
+        background-color: black;
+        border-radius: 50%;
+    }
+                         
 </style>
diff --git a/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss b/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss
index d4be1c437..1c18cc3cc 100644
--- a/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss
+++ b/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss
@@ -249,39 +249,3 @@ form label.nhsuk-u-visually-hidden {
     box-shadow: 0 0 0 4px $nhsuk-yellow;
 }
 
-/*Add a background color to the radio button when focused */
-.radio-button:focus {
-    box-shadow: 0 0 0 4px $nhsuk-yellow !important;
-    outline: 0;
-    //box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
-}
-
-.radio-button {
-    appearance: none;
-    -webkit-appearance: none;
-    width: 24px;
-    height: 24px;
-    border: 2px solid black;
-    border-radius: 50%;
-    position: relative;
-    cursor: pointer;
-    transition: box-shadow 0.3s;
-    outline: none;
-}
-
-/* Yellow glow on focus */
-.radio-button:focus {
-    box-shadow: 0 0 0 4px $nhsuk-yellow; /* yellow circle */
-}
-
-/* Inner black dot when selected */
-.radio-button:checked::before {
-    content: "";
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    width: 12px;
-    height: 12px;
-    background-color: black;
-    border-radius: 50%;
-}