docs: modify docs demo ui

sheinsight · Jun 19, 2024 · 6cdc259 · 6cdc259
1 parent 45cf6c8
commit 6cdc259
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/use-lorem-ipsum/demo.tsx b/src/use-lorem-ipsum/demo.tsx
@@ -9,9 +9,9 @@ export function App() {
 
   return (
     <Card>
-      <KeyValue label="Stable lorem ipsum" value={lorem} />
-      <KeyValue label="Stable lorem ipsum 2" value={lorem2} />
-      <KeyValue label="Random lorem ipsum" value={randomLorem} />
+      <KeyValue labelWidth="180px" label="Stable lorem ipsum" value={lorem} />
+      <KeyValue labelWidth="180px" label="Stable lorem ipsum 2" value={lorem2} />
+      <KeyValue labelWidth="180px" label="Random lorem ipsum" value={randomLorem} />
       <Button onClick={render}>Rerender</Button>
     </Card>
   )

diff --git a/website/src/components/demo-related/key-value.tsx b/website/src/components/demo-related/key-value.tsx
@@ -26,7 +26,7 @@ export function KeyValue(props: KeyValueProps) {
       <span className="text-black/80 dark:text-white/80" style={{ width: props.labelWidth }}>
         {props.label ?? 'Value'}:{' '}
       </span>
-      <div>
+      <div className="flex-1">
         <span className={`font-bold ${colors[props.color ?? color] || ''}`}>{`${value}`}</span>
         <span>{props.suffix}</span>
       </div>