Fix icon overflows text in the List component

kubk · Apr 17, 2024 · 3ebce63 · 3ebce63
1 parent 46260a0
commit 3ebce63
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 11 deletions.
diff --git a/src/screens/component-catalog/components.tsx b/src/screens/component-catalog/components.tsx
@@ -4,6 +4,7 @@ import { CardPreviewStory } from "./card-preview-story.tsx";
 import { SelectStory } from "./select-story.tsx";
 import { PieChartCanvasStory } from "./pie-chart-canvas-story.tsx";
 import { SnackbarStory } from "./snackbar-story.tsx";
+import { ListStory } from "./list-story.tsx";
 
 export type Component = {
   name: string;
@@ -45,15 +46,19 @@ export const components: Array<Component> = [
     ),
   },
   {
-    name: "Select",
+    name: SelectStory.name,
     component: <SelectStory />,
   },
   {
-    name: "PieChart",
+    name: PieChartCanvasStory.name,
     component: <PieChartCanvasStory />,
   },
   {
     name: SnackbarStory.name,
     component: <SnackbarStory />,
   },
+  {
+    name: ListStory.name,
+    component: <ListStory />,
+  },
 ];
diff --git a/src/screens/component-catalog/list-story.tsx b/src/screens/component-catalog/list-story.tsx
@@ -0,0 +1,48 @@
+import { CardNumber } from "../../ui/card-number.tsx";
+import { css, cx } from "@emotion/css";
+import { theme } from "../../ui/theme.tsx";
+import { reset } from "../../ui/reset.ts";
+import { List } from "../../ui/list.tsx";
+import React from "react";
+
+export const ListStory = () => {
+  return (
+    <List
+      animateTap={false}
+      items={Array(3)
+        .fill(null)
+        .map((card, i) => ({
+          text: (
+            <div>
+              <div>
+                <CardNumber number={i + 1} />
+                Test title
+              </div>
+              <div
+                className={css({
+                  color: theme.hintColor,
+                  fontSize: 14,
+                })}
+              >
+                Test description Test description Test description Test
+                description Test description
+              </div>
+            </div>
+          ),
+          right: (
+            <button
+              className={cx(reset.button, css({ fontSize: 16 }))}
+              onClick={() => {}}
+            >
+              <i
+                className={cx(
+                  "mdi mdi-delete-circle mdi-24px",
+                  css({ color: theme.danger }),
+                )}
+              />
+            </button>
+          ),
+        }))}
+    />
+  );
+};
diff --git a/src/screens/folder-review/folder-preview.tsx b/src/screens/folder-review/folder-preview.tsx
@@ -203,7 +203,11 @@ export const FolderPreview = observer(() => {
               deckListStore.goDeckById(deck.id);
             },
             text: deck.name,
-            right: <CardsToReview item={deck} />,
+            right: (
+              <div className={css({ position: "relative", marginRight: -12 })}>
+                <CardsToReview item={deck} />
+              </div>
+            ),
           }))}
         />
         {folder.cardsToReview.length === 0 &&

diff --git a/src/ui/list.tsx b/src/ui/list.tsx
@@ -92,14 +92,7 @@ export const List = observer((props: Props) => {
                   {item.text}
                 </span>
                 {item.right ? (
-                  <span
-                    className={css({
-                      position: "absolute",
-                      right: 12,
-                    })}
-                  >
-                    {item.right}
-                  </span>
+                  <div className={css({ marginRight: 10 })}>{item.right}</div>
                 ) : null}
               </div>
             </div>