Add fillWidth to the CardHorizontal items (#511)

* Add fillWidth to the CardHorizontal * Update the alignment for the horizontal card * Remove fillWidth prop
ClickHouse · Jan 2, 2025 · 89e90c1 · 89e90c1
1 parent 974f7b1
commit 89e90c1
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/components/CardHorizontal/CardHorizontal.tsx b/src/components/CardHorizontal/CardHorizontal.tsx
@@ -4,8 +4,9 @@ import { Icon, IconName } from "@/components";
 
 type CardColor = "default" | "muted";
 
-export interface CardHorizontalProps extends HTMLAttributes<HTMLDivElement> {
-  title?: string;
+export interface CardHorizontalProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
   icon?: IconName;
   disabled?: boolean;
   description?: ReactNode;
@@ -17,18 +18,19 @@ export interface CardHorizontalProps extends HTMLAttributes<HTMLDivElement> {
 const Header = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
-  width: fit-content;
+  align-items: start;
+  width: 100%;
   max-width: 100%;
   gap: inherit;
 `;
 
 const Description = styled.div`
   display: flex;
   flex-direction: column;
-  align-self: center;
+  align-self: start;
   gap: ${({ theme }) => theme.click.card.horizontal.space.gap};
   flex: 1;
+  width: 100%;
 `;
 
 const Wrapper = styled.div<{
@@ -123,6 +125,7 @@ const CardIcon = styled(Icon)`
 const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  width: 100%;
 `;
 
 export const CardHorizontal = ({