From cd8d369ceccc85196d8d98b0a16d98fead3c730f Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Thu, 25 Jan 2024 21:18:30 +0100
Subject: [PATCH] [ENG-1573] Fix overview devices card height (#1999)

quick height fix
---
 interface/app/$libraryId/overview/NewCard.tsx | 19 +++++++++++++++++--
 interface/app/$libraryId/overview/index.tsx   |  1 +
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/interface/app/$libraryId/overview/NewCard.tsx b/interface/app/$libraryId/overview/NewCard.tsx
index e9e2ccefb..fd708490e 100644
--- a/interface/app/$libraryId/overview/NewCard.tsx
+++ b/interface/app/$libraryId/overview/NewCard.tsx
@@ -1,10 +1,12 @@
 // import { X } from '@phosphor-icons/react';
+import clsx from 'clsx';
 import { Icon, IconName } from '~/components';
 
 type NewCardProps =
 	| {
 			icons: IconName[];
 			text: string;
+			className?: string;
 			button?: () => JSX.Element;
 			buttonText?: never;
 			buttonHandler?: never;
@@ -12,6 +14,7 @@ type NewCardProps =
 	| {
 			icons: IconName[];
 			text: string;
+			className?: string;
 			buttonText: string;
 			buttonHandler: () => void;
 			button?: never;
@@ -19,9 +22,21 @@ type NewCardProps =
 
 const maskImage = `linear-gradient(90deg, transparent 0.1%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 35%, transparent 99%)`;
 
-export default function NewCard({ icons, text, buttonText, buttonHandler, button }: NewCardProps) {
+export default function NewCard({
+	icons,
+	text,
+	buttonText,
+	buttonHandler,
+	button,
+	className
+}: NewCardProps) {
 	return (
-		<div className="flex h-[170px] w-[280px] shrink-0 flex-col justify-between rounded border border-dashed border-app-line p-4">
+		<div
+			className={clsx(
+				'flex h-[170px] w-[280px] shrink-0 flex-col justify-between rounded border border-dashed border-app-line p-4',
+				className
+			)}
+		>
 			<div className="flex flex-row items-start justify-between">
 				<div
 					className="flex flex-row"
diff --git a/interface/app/$libraryId/overview/index.tsx b/interface/app/$libraryId/overview/index.tsx
index cb71ec29b..2426808e4 100644
--- a/interface/app/$libraryId/overview/index.tsx
+++ b/interface/app/$libraryId/overview/index.tsx
@@ -127,6 +127,7 @@ export const Component = () => {
 						<NewCard
 							icons={['Laptop', 'Server', 'SilverBox', 'Tablet']}
 							text="Spacedrive works best on all your devices."
+							className="h-auto"
 							// buttonText="Connect a device"
 						/>
 						{/**/}