feat(PackageHeader): min height + outline button

frontend/islands/TicketModal.tsx

@@ -19,7 +19,7 @@ export function TicketModal(
   { user, kind, style, fields, children, extraMeta, title, description }: {
     children: ComponentChildren;
     kind: TicketKind;
-    style: "primary" | "danger";
+    style: "primary" | "danger" | "danger-outline";
     user: User | null;
     title: string;
     description: ComponentChildren;
@@ -63,6 +63,8 @@ export function TicketModal(
       <button
         ref={buttonRef}
         id={`${prefix}-ticket-modal`}
+        // "button-danger-outline" ensure that tailwind precess this class
+        // because it's ins't use somewhere else and here it's dynamic class
         class={`button-${style}`}
         type="button"
         onClick={() => setOpen((v) => !v)}

frontend/routes/package/(_components)/PackageHeader.tsx

@@ -91,7 +91,7 @@ export function PackageHeader({
         </div>
       )}
 
-      <div class="flex flex-col flex-wrap md:flex-row items-start justify-between gap-6">
+      <div class="flex flex-col flex-wrap md:flex-row items-start justify-between gap-6 md:min-h-48">
         <div class="space-y-3.5 flex-shrink">
           <div class="flex flex-row gap-x-3 gap-y-2 flex-wrap md:items-center">
             <h1 class="text-2xl md:text-3xl flex flex-wrap items-center font-sans gap-x-2">
@@ -226,7 +226,7 @@ export function PackageHeader({
             <TicketModal
               user={user}
               kind="package_report"
-              style="danger"
+              style="danger-outline"
               title="Report package"
               description={
                 <>

frontend/static/styles.css

@@ -135,6 +135,18 @@
       active:translate-y-[4px];
   }
 
+  .button-danger-outline {
+    @apply button border-1.5 border-red-500 bg-transparent text-red-500
+      hover:bg-red-100 disabled:bg-jsr-gray-100 outline-red-600
+      disabled:text-red-300 shadow-accent-sm disabled:shadow-transparent
+      disabled:border-red-300 transition-all duration-75 ease-in-out;
+  }
+
+  .button-danger-outline:not(:disabled) {
+    @apply active:shadow-accent-sm-close active:translate-x-[3px]
+      active:translate-y-[4px];
+  }
+
   .chip {
     @apply inline-block py-1 px-2.5 rounded-full whitespace-nowrap leading-none
       font-semibold text-sm;