Merge pull request #101 from filecoin-project/bp/fix-responsiveness

[UXIT-3605] Fix responsiveness issues on upload cards

Author: barbaraperic

src/components/file-picker/dashed-container.tsx

@@ -9,7 +9,7 @@ export function DashedContainer({ className, ...rest }: DashedContainerProps) {
       {...rest}
       className={clsx(
         className,
-        'flex h-full w-full items-center justify-center rounded-lg border border-dashed border-zinc-700 bg-zinc-950'
+        'flex h-full w-full items-center justify-center rounded-lg border border-dashed border-zinc-700 bg-zinc-950 p-6'
       )}
     />
   )

src/components/file-picker/selected-file.tsx

@@ -11,8 +11,8 @@ type SelectedFileProps = {
 export function SelectedFile({ file, onReset }: SelectedFileProps) {
   return (
     <DashedContainer>
-      <div className="flex items-center gap-1">
-        <p className="font-medium text-zinc-50">{file.name}</p>
+      <div className="flex items-center gap-1 min-w-0">
+        <p className="font-medium text-zinc-50 break-words min-w-0">{file.name}</p>
         <button
           className="group/button cursor-pointer rounded-full p-2 focus:outline-none"
           onClick={onReset}

src/components/ui/badge-status.tsx

@@ -9,21 +9,24 @@ type BadgeStatusProps = VariantProps<typeof badgeVariants> & {
   status: Status
 }
 
-const badgeVariants = cva('inline-flex items-center gap-1 pl-1.5 pr-2 py-0.5 rounded-full text-sm font-medium', {
-  variants: {
-    status: {
-      'in-progress': 'bg-badge-in-progress text-badge-in-progress-text border border-badge-in-progress-border',
-      completed: 'bg-brand-950 text-brand-700 border border-brand-900',
-      pinned: 'bg-brand-950 text-brand-700 border border-brand-900',
-      published: 'bg-yellow-600/30 border border-yellow-400/20 text-yellow-200',
-      error: null,
-      pending: 'bg-zinc-800 border border-zinc-700 text-zinc-300',
+const badgeVariants = cva(
+  'inline-flex items-center gap-1 pl-1.5 pr-2 py-0.5 rounded-full text-sm font-medium flex-shrink-0',
+  {
+    variants: {
+      status: {
+        'in-progress': 'bg-badge-in-progress text-badge-in-progress-text border border-badge-in-progress-border',
+        completed: 'bg-brand-950 text-brand-700 border border-brand-900',
+        pinned: 'bg-brand-950 text-brand-700 border border-brand-900',
+        published: 'bg-yellow-600/30 border border-yellow-400/20 text-yellow-200',
+        error: null,
+        pending: 'bg-zinc-800 border border-zinc-700 text-zinc-300',
+      },
     },
-  },
-  defaultVariants: {
-    status: 'in-progress',
-  },
-})
+    defaultVariants: {
+      status: 'in-progress',
+    },
+  }
+)
 
 const statusIcons: Record<Status, React.ReactNode> = {
   'in-progress': <LoaderCircle className="animate-spin" size={12} />,

src/components/ui/card.tsx

@@ -33,7 +33,7 @@ function CardHeader({ title, status, estimatedTime, withSpinner }: CardHeaderPro
   const showSpinner = isInProgress && withSpinner
 
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex items-center justify-between gap-2">
       <div className="flex items-center gap-3">
         {showSpinner && <Spinner size="sm" />}
         <Heading tag="h4">{title}</Heading>
@@ -56,8 +56,8 @@ function CardContent({ children }: CardContentProps) {
 
 function CardInfoRow({ title, subtitle, children }: CardInfoRowProps) {
   return (
-    <div className="flex items-center justify-between">
-      <div className="flex flex-col gap-2 text-base">
+    <div className="flex items-center justify-between gap-6">
+      <div className="flex flex-col gap-2 text-base min-w-0 flex-1">
         <Heading tag="h4">{title}</Heading>
         <p>{subtitle}</p>
       </div>

src/components/ui/file-info.tsx

@@ -10,12 +10,16 @@ type FileInfoProps = {
 
 function FileInfo({ fileName, fileSize, badgeStatus, children }: FileInfoProps) {
   return (
-    <div className="flex justify-between items-center">
-      <div className="flex flex-col gap-1">
-        <Heading tag="h3">{fileName}</Heading>
+    <div className="flex justify-between items-center gap-6">
+      <div className="flex flex-col gap-1 min-w-0 flex-1">
+        <Heading tag="h3">
+          <span className="break-words min-w-0" title={fileName}>
+            {fileName}
+          </span>
+        </Heading>
         <p className="text-zinc-400">{fileSize}</p>
       </div>
-      <div className="flex items-center gap-6">
+      <div className="flex items-center gap-3 flex-shrink-0">
         <BadgeStatus status={badgeStatus} />
         {children}
       </div>

src/components/ui/heading.tsx

@@ -3,7 +3,7 @@ import { cn } from '../../utils/cn.ts'
 
 export type HeadingProps = VariantProps<typeof headingVariants> & {
   tag: 'h1' | 'h2' | 'h3' | 'h4'
-  children: string
+  children: string | React.ReactNode
 }
 
 const headingVariants = cva('text-balance', {

src/components/ui/link.tsx

@@ -1,10 +1,20 @@
+import { cn } from '@/utils/cn.ts'
+
 type TextLinkProps = {
   href: string
   children: React.ReactNode
+  isTruncated?: boolean
 }
 
-function TextLink(props: TextLinkProps) {
-  return <ExternalLink {...props} className="text-brand-500 underline focus:brand-outline hover:text-brand-100" />
+function TextLink({ href, children, isTruncated }: TextLinkProps) {
+  return (
+    <ExternalLink
+      className={cn('text-brand-500 underline focus:brand-outline hover:text-brand-100', isTruncated && 'truncate')}
+      href={href}
+    >
+      {children}
+    </ExternalLink>
+  )
 }
 
 type ExternalLinkProps = Omit<React.ComponentProps<'a'>, 'rel' | 'target'>

src/components/ui/spinner.tsx

@@ -23,7 +23,7 @@ function Spinner({ className, size = 'md', ...props }: SpinnerProps) {
       role="status"
       size={sizeValue}
       {...props}
-      className={cn('text-brand-700 animate-spin', className)}
+      className={cn('text-brand-700 animate-spin flex-shrink-0', className)}
     />
   )
 }

src/components/ui/text-with-copy-to-clipboard.tsx

@@ -19,10 +19,16 @@ function TextWithCopyToClipboard({ text, href }: TextWithCopyToClipboardProps) {
   }
 
   return (
-    <span className="flex items-center gap-2">
-      {href ? <TextLink href={href}>{text}</TextLink> : <span className="text-zinc-400">{text}</span>}
+    <span className="flex items-center gap-2 min-w-0 w-full">
+      {href ? (
+        <TextLink href={href} isTruncated>
+          {text}
+        </TextLink>
+      ) : (
+        <span className="text-zinc-400">{text}</span>
+      )}
       <button
-        className="cursor-pointer text-zinc-400 p-2 -m-2 hover:text-white focus:brand-outline border border-transparent rounded-md "
+        className="cursor-pointer text-zinc-400 p-2 -m-2 hover:text-white focus:brand-outline border border-transparent rounded-md flex-shrink-0"
         onClick={handleCopyToClipboard}
         title="Copy to clipboard"
         type="button"