@beemafrica/ui 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beemafrica/ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Shared Beem UI components built on shadcn/Radix",
   "type": "module",
   "publishConfig": {

package/src/components/ticket.tsx

@@ -75,12 +75,12 @@ function Ticket({
       className={cn(
         container_background,
         border,
-        "py-[14px] px-[16px] rounded-[12px] border shadow-sm flex flex-col gap-3 cursor-pointer"
+        "flex cursor-pointer flex-col gap-3 rounded-[12px] border px-4 py-3.5 shadow-sm"
       )}
     >
       <button type="button" onClick={click} className="w-full text-left">
-        <div className="flex flex-row items-center justify-between">
-          <div className="flex flex-row gap-1.5 items-center">
+        <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex flex-wrap items-center gap-1.5">
             <Avatar
               className={cn(
                 avatar_background,
@@ -90,7 +90,7 @@ function Ticket({
               <AvatarFallback
                 className={cn(
                   avatar_background,
-                  "leading-1 flex size-full items-center justify-center text-[12px] text-white font-semibold"
+                  "leading-1 flex size-full items-center justify-center text-[12px] font-semibold text-white"
                 )}
                 delayMs={600}
               >
@@ -103,16 +103,20 @@ function Ticket({
               className={cn(
                 pill_background,
                 pill_text_color,
-                "py-[3px] px-[10px] rounded-[9999px] text-xs"
+                "rounded-[9999px] px-[10px] py-[3px] text-xs"
               )}
             >
               {ticket_type}
             </p>
-            <small className="text-[#6b7bbd]">view full email</small>
-            <ExternalLink size="12px" className="text-[#6B7B8D]" />
+            <span className="flex items-center gap-1">
+              <small className="text-[#6b7bbd]">view full email</small>
+              <ExternalLink size="12px" className="text-[#6B7B8D]" />
+            </span>
           </div>
 
-          {time && <p className="text-[#98A9B8] text-[11.5px]">{time} </p>}
+          {time && (
+            <p className="shrink-0 text-[11.5px] text-[#98A9B8]">{time}</p>
+          )}
         </div>
       </button>
 
@@ -123,18 +127,17 @@ function Ticket({
             <CollapsibleTrigger asChild>
               <Button
                 variant="ghost"
-                className="group w-full hover:bg-transparent hover:text-inherit data-[state=open]:bg-transparent justify-start -ml-4"
+                className="group -ml-4 w-full justify-start hover:bg-transparent hover:text-inherit data-[state=open]:bg-transparent"
               >
                 <ChevronRightIcon className="group-data-[state=open]:rotate-90" />
                 Product details
               </Button>
             </CollapsibleTrigger>
-            <CollapsibleContent className="flex flex-col items-start gap-2 p-2.5 pt-0 text-sm max-h-[150px] overflow-y-auto scrollbar scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full">
+            <CollapsibleContent className="scrollbar scrollbar-thin scrollbar-thumb-rounded-full scrollbar-track-rounded-full flex max-h-[150px] flex-col items-start gap-2 overflow-y-auto p-2.5 pt-0 text-sm">
               {history.map((hs, index) => {
                 return (
                   // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                  <div key={index} className="">
-                    {" "}
+                  <div key={index}>
                     <div>{hs.label}</div>
                     <div>{hs.value}</div>
                   </div>