feat(web): dropdown and attachment card changes

Author: ItsNotGoodName

web/components/attachment_card.templ

@@ -18,14 +18,14 @@ templ AttachmentCard(props AttachmentCardProps) {
       }
       <div class="flex-1 p-2 flex flex-col justify-end gap-2">
         <p class="break-all font-bold">{ props.Attachment.Name }</p>
-        <div class="join flex justify-end">
-          <a class="join-item btn tooltip flex items-center" data-tip="Envelope" href={ routes.Envelope(props.Attachment.MessageID).URLQuery("tab=" + routes.EnvelopeTabAttachments.String()) }>
+        <div class="join flex">
+          <a class="join-item btn tooltip flex-1 flex items-center" data-tip="Envelope" href={ routes.Envelope(props.Attachment.MessageID).URLQuery("tab=" + routes.EnvelopeTabAttachments.String()) }>
             @icons.Mail("h-5 w-5")
           </a>
-          <a class="join-item btn tooltip flex items-center" data-tip="View" hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URL() }>
+          <a class="join-item btn tooltip flex-1 flex items-center" data-tip="View" hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URL() }>
             @icons.Eye("h-5 w-5")
           </a>
-          <a class="join-item btn tooltip flex items-center" data-tip="Download" hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URLQuery("download=1") }>
+          <a class="join-item btn tooltip flex-1 flex items-center" data-tip="Download" hx-boost="false" href={ routes.AttachmentFile(props.Attachment.FileName()).URLQuery("download=1") }>
             @icons.Download("h-5 w-5")
           </a>
         </div>

web/components/attachment_card_templ.go

@@ -18,10 +18,10 @@ templ Header(m meta.Meta) {
     </div>
     if !m.Anonymous {
       <div class="flex-none">
-        <details class="dropdown dropdown-end">
-          <summary class="btn btn-square btn-ghost">
+        <div class="dropdown dropdown-end">
+          <label tabindex="0" class="btn btn-square btn-ghost">
             @icons.More("h-5 w-5")
-          </summary>
+          </label>
           <ul class="menu dropdown-content bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg">
             <li>
               <a href="#" hx-delete={ routes.Logout().URLString() }>
@@ -30,9 +30,8 @@ templ Header(m meta.Meta) {
               </a>
             </li>
           </ul>
-        </details>
+        </div>
       </div>
     }
   </div>
 }
-

web/components/header.templ

@@ -19,20 +19,20 @@ type PaginateHeaderProps struct {
 templ PaginateHeader(props PaginateHeaderProps) {
   <div class="flex flex-col items-center justify-between gap-4 sm:flex-row">
     <div class="mr-auto flex flex-row items-center gap-2">
-      <details class="dropdown">
-        <summary class="btn btn-sm btn-outline">
+      <div class="dropdown">
+        <label tabindex="0" class="btn btn-sm btn-outline">
           { strconv.Itoa(props.PageResult.PerPage) }
-        </summary>
-        <ul class="menu dropdown-content bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg">
-        for _, option := range limits {
-          <li>
-            <a href={ props.Route.URLQuery(helpers.Query(props.Query, "perPage", option)) }>
-              { strconv.Itoa(option) }
-            </a>
-          </li>
-        }
+        </label>
+        <ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg">
+          for _, option := range limits {
+            <li>
+              <a href={ props.Route.URLQuery(helpers.Query(props.Query, "perPage", option)) }>
+                { strconv.Itoa(option) }
+              </a>
+            </li>
+          }
         </ul>
-      </details>
+      </div>
       if props.Ascending {
         <a class="btn btn-sm btn-outline" href={ props.Route.URLQuery(helpers.Query(props.Query, "ascending", "")) }>
           ASC