style(ui): use full-width slim chevron toggle; keep IconButton square for actions

src/components/BookmarkItem.tsx

@@ -99,13 +99,14 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
             </div>
           ))}
           {extractedUrls.length > 3 && (
-            <IconButton
+            <button
-              icon={urlsExpanded ? faChevronUp : faChevronDown}
+              className="expand-toggle"
-              ariaLabel={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
-              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
               onClick={() => setUrlsExpanded(v => !v)}
-              size={32}
+              aria-label={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
-            />
+              title={urlsExpanded ? 'Collapse URLs' : 'Expand URLs'}
+            >
+              <FontAwesomeIcon icon={urlsExpanded ? faChevronUp : faChevronDown} />
+            </button>
           )}
         </div>
       )}
@@ -123,33 +124,33 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
       )}
 
       {contentLength > 210 && (
-        <IconButton
+        <button
-          icon={expanded ? faChevronUp : faChevronDown}
+          className="expand-toggle"
-          ariaLabel={expanded ? 'Collapse' : 'Expand'}
-          title={expanded ? 'Collapse' : 'Expand'}
           onClick={() => setExpanded(v => !v)}
-          size={32}
+          aria-label={expanded ? 'Collapse' : 'Expand'}
-        />
+          title={expanded ? 'Collapse' : 'Expand'}
+        >
+          <FontAwesomeIcon icon={expanded ? faChevronUp : faChevronDown} />
+        </button>
       )}
       
       <div className="bookmark-meta">
         {eventNevent ? (
-          <IconButton
+          <a
-            icon={getKindIcon(bookmark.kind)}
-            ariaLabel="Open event in search"
-            title="Open event in search"
             href={`https://search.dergigi.com/e/${eventNevent}`}
-            variant="ghost"
+            target="_blank"
-            size={32}
+            rel="noopener noreferrer"
-          />
+            className="kind-icon-link"
+            title="Open event in search"
+          >
+            <span className="kind-icon">
+              <FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
+            </span>
+          </a>
         ) : (
-          <IconButton
+          <span className="kind-icon">
-            icon={getKindIcon(bookmark.kind)}
+            <FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
-            ariaLabel="Event kind"
+          </span>
-            title="Event kind"
-            variant="ghost"
-            size={32}
-          />
         )}
         <span>
           <a

src/index.css

@@ -542,11 +542,16 @@ body {
 }
 
 .expand-toggle {
-  margin-top: 0.25rem;
+  margin: 0.25rem 0;
   background: transparent;
   border: none;
   color: #888;
   cursor: pointer;
+  width: 100%;
+  height: 22px; /* half of default icon button */
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .expand-toggle:hover {