From 33ff9519dadfb534fd9f99e8f822bc9be55be803 Mon Sep 17 00:00:00 2001
From: Don Walizer <12420708+dwalizer@users.noreply.github.com>
Date: Mon, 30 Dec 2024 10:16:45 -0500
Subject: [PATCH] #2218 Adjust styling to improve reflow on small screens

---
 .../progress/SkillsProgressList.vue           | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/dashboard/src/skills-display/components/progress/SkillsProgressList.vue b/dashboard/src/skills-display/components/progress/SkillsProgressList.vue
index 833cac2b3..8519d721d 100644
--- a/dashboard/src/skills-display/components/progress/SkillsProgressList.vue
+++ b/dashboard/src/skills-display/components/progress/SkillsProgressList.vue
@@ -279,18 +279,22 @@ const onGroupsToggle = () => {
 
 
           <div class="" data-cy="skillDetailsToggle">
-            <div class="flex flex-row align-content-center">
-              <span class="text-muted pr-1 align-content-center" v-if="!route.params.badgeId">Expand Groups:</span>
-              <InputSwitch v-model="expandGroups"
-                           v-if="!route.params.badgeId"
-                           @change="onGroupsToggle"
-                           aria-label="Expand Groups"
-                           data-cy="expandGroupsSwitch" />
-              <span class="text-muted pr-1 ml-3 align-content-center">{{ attributes.skillDisplayName }} Details:</span>
-              <InputSwitch v-model="showDescriptionsInternal"
-                           @change="onDetailsToggle"
-                           :aria-label="`Show ${attributes.skillDisplayName} Details`"
-                           data-cy="toggleSkillDetails" />
+            <div class="flex flex-row flex-wrap align-content-center">
+              <div class="flex mr-3">
+                <span class="text-muted pr-1 align-content-center" v-if="!route.params.badgeId">Expand Groups:</span>
+                <InputSwitch v-model="expandGroups"
+                             v-if="!route.params.badgeId"
+                             @change="onGroupsToggle"
+                             aria-label="Expand Groups"
+                             data-cy="expandGroupsSwitch" />
+              </div>
+              <div class="flex">
+                <span class="text-muted pr-1 align-content-center">{{ attributes.skillDisplayName }} Details:</span>
+                <InputSwitch v-model="showDescriptionsInternal"
+                             @change="onDetailsToggle"
+                             :aria-label="`Show ${attributes.skillDisplayName} Details`"
+                             data-cy="toggleSkillDetails" />
+              </div>
             </div>
           </div>