Fix recommended badge positioning

Author: satya164

src/css/custom.css

@@ -1260,7 +1260,7 @@ code {
     }
 
     &:hover,
-    &:focus-within {
+    &:has(> p:first-child a:focus-visible) {
       box-shadow: var(--ifm-global-shadow-md);
 
       &::before {
@@ -1275,27 +1275,14 @@ code {
 
   li > p {
     margin: 0;
+    margin-bottom: calc(var(--ifm-spacing-vertical) / 2);
   }
 
-  li > p + p {
-    margin-top: calc(var(--ifm-spacing-vertical) / 2);
-  }
-
-  li:has(> .recommended-badge) {
+  li > p:first-child {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    column-gap: 0.75rem;
-    row-gap: calc(var(--ifm-spacing-vertical) / 2);
-  }
-
-  li:has(> .recommended-badge) > p:first-child {
-    min-width: 0;
-  }
-
-  li:has(> .recommended-badge) > .recommended-badge + p {
-    flex-basis: 100%;
-    margin-top: 0;
+    gap: 0.75rem;
   }
 
   li > p:first-child a {

versioned_docs/version-7.x/getting-started.md

@@ -170,9 +170,7 @@ There are 2 ways to configure navigators:
 
 <div class="featured-actions">
 
-- **[Static configuration](hello-react-navigation.md?config=static)**
-
-  <span class="recommended-badge">Recommended</span>
+- **[Static configuration](hello-react-navigation.md?config=static)** <span class="recommended-badge">Recommended</span>
 
   Object-based configuration with automatic TypeScript types and deep linking. Supports static screen lists with dynamic navigator options.
 

versioned_docs/version-8.x/getting-started.md

@@ -157,9 +157,7 @@ There are 2 ways to configure navigators:
 
 <div class="featured-actions">
 
-- **[Static configuration](hello-react-navigation.md?config=static)**
-
-  <span class="recommended-badge">Recommended</span>
+- **[Static configuration](hello-react-navigation.md?config=static)** <span class="recommended-badge">Recommended</span>
 
   Object-based configuration with automatic TypeScript types and deep linking. Supports static screen lists with dynamic navigator options.