💄 Fix User alignment in flex containers

Author: Frontendland

src/blocks/User/User.astro

@@ -1,6 +1,7 @@
 ---
 import {
     Avatar,
+    ConditionalWrapper,
     Rating
 } from 'webcoreui/astro'
 
@@ -19,21 +20,26 @@ const {
 } = Astro.props
 ---
 
-<div class="flex sm items-center">
-    <Avatar
-        img={avatar}
-        size={avatarSize}
-    />
-    <div class="flex column xs">
-        <span>{name}</span>
-        {role && (
-            <span class="muted" data-tooltip={roleTooltip}>
-                {role}
-            </span>
-        )}
+<ConditionalWrapper condition={!!rating}>
+    <div slot="wrapper">children</div>
+
+    <div class="flex sm items-center">
+        <Avatar
+            img={avatar}
+            size={avatarSize}
+        />
+        <div class="flex column xs">
+            <span>{name}</span>
+            {role && (
+                <span class="muted" data-tooltip={roleTooltip}>
+                    {role}
+                </span>
+            )}
+        </div>
     </div>
-</div>
-{rating && (
-    <hr />
-    <Rating {...rest} score={rating} />
-)}
+    {rating && (
+        <hr />
+        <Rating {...rest} score={rating} />
+    )}
+</ConditionalWrapper>
+

src/blocks/User/User.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import {
         Avatar,
+        ConditionalWrapper,
         Rating
     } from 'webcoreui/svelte'
 
@@ -17,21 +18,23 @@
     }: UserProps = $props()
 </script>
 
-<div class="flex sm items-center">
-    <Avatar
-        img={avatar}
-        size={avatarSize}
-    />
-    <div class="flex column xs">
-        <span>{name}</span>
-        {#if role}
-            <span class="muted" data-tooltip={roleTooltip}>
-                {role}
-            </span>
-        {/if}
+<ConditionalWrapper condition={!!rating}>
+    <div class="flex sm items-center">
+        <Avatar
+            img={avatar}
+            size={avatarSize}
+        />
+        <div class="flex column xs">
+            <span>{name}</span>
+            {#if role}
+                <span class="muted" data-tooltip={roleTooltip}>
+                    {role}
+                </span>
+            {/if}
+        </div>
     </div>
-</div>
-{#if rating}
-    <hr />
-    <Rating {...rest} score={rating} />
-{/if}
+    {#if rating}
+        <hr />
+        <Rating {...rest} score={rating} />
+    {/if}
+</ConditionalWrapper>

src/blocks/User/User.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {
     Avatar,
+    ConditionalWrapper,
     Rating
 } from 'webcoreui/react'
 
@@ -17,7 +18,10 @@ const User = ({
 }: UserProps) => {
 
     return (
-        <React.Fragment>
+        <ConditionalWrapper
+            condition={!!rating}
+            wrapper={children => <div>{children}</div>}
+        >
             <div className="flex sm items-center">
                 <Avatar
                     img={avatar}
@@ -38,7 +42,7 @@ const User = ({
                     <Rating {...rest} score={rating} />
                 </React.Fragment>
             )}
-        </React.Fragment>
+        </ConditionalWrapper>
     )
 }