More compact menu items

src/app.css

@@ -1273,6 +1273,18 @@ body:has(.status-deck) .media-post-link {
 .szh-menu .menu-horizontal .szh-menu__item {
   flex: 1;
 }
+.szh-menu .menu-horizontal .szh-menu__item:not(:only-child):first-child {
+  padding-right: 4px !important;
+}
+.szh-menu
+  .menu-horizontal
+  .szh-menu__item:not(:only-child):not(:first-child):not(:last-child) {
+  padding-left: 8px !important;
+  padding-right: 4px !important;
+}
+.szh-menu .menu-horizontal .szh-menu__item:not(:only-child):last-child {
+  padding-left: 8px !important;
+}
 .szh-menu .szh-menu__item .menu-shortcut {
   opacity: 0.5;
   font-weight: normal;

src/components/status.jsx

@@ -462,12 +462,13 @@ function Status({
       )}
       {!isSizeLarge && sameInstance && (
         <>
-          <MenuItem onClick={replyStatus}>
+          <div class="menu-horizontal">
-            <Icon icon="reply" />
+            <MenuItem onClick={replyStatus}>
-            <span>Reply</span>
+              <Icon icon="reply" />
-          </MenuItem>
+              <span>Reply</span>
-          {canBoost && (
+            </MenuItem>
             <MenuItem
+              disabled={!canBoost}
               onClick={async () => {
                 try {
                   const done = await boostStatus();
@@ -485,41 +486,43 @@ function Status({
               />
               <span>{reblogged ? 'Unboost' : 'Boost…'}</span>
             </MenuItem>
-          )}
+          </div>
-          <MenuItem
+          <div class="menu-horizontal">
-            onClick={() => {
+            <MenuItem
-              try {
+              onClick={() => {
-                favouriteStatus();
+                try {
-                if (!isSizeLarge)
+                  favouriteStatus();
-                  showToast(favourited ? 'Unfavourited' : 'Favourited');
+                  if (!isSizeLarge)
-              } catch (e) {}
+                    showToast(favourited ? 'Unfavourited' : 'Favourited');
-            }}
+                } catch (e) {}
-          >
-            <Icon
-              icon="heart"
-              style={{
-                color: favourited && 'var(--favourite-color)',
               }}
-            />
+            >
-            <span>{favourited ? 'Unfavourite' : 'Favourite'}</span>
+              <Icon
-          </MenuItem>
+                icon="heart"
-          <MenuItem
+                style={{
-            onClick={() => {
+                  color: favourited && 'var(--favourite-color)',
-              try {
+                }}
-                bookmarkStatus();
+              />
-                if (!isSizeLarge)
+              <span>{favourited ? 'Unfavourite' : 'Favourite'}</span>
-                  showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked');
+            </MenuItem>
-              } catch (e) {}
+            <MenuItem
-            }}
+              onClick={() => {
-          >
+                try {
-            <Icon
+                  bookmarkStatus();
-              icon="bookmark"
+                  if (!isSizeLarge)
-              style={{
+                    showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked');
-                color: bookmarked && 'var(--link-color)',
+                } catch (e) {}
               }}
-            />
+            >
-            <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
+              <Icon
-          </MenuItem>
+                icon="bookmark"
+                style={{
+                  color: bookmarked && 'var(--link-color)',
+                }}
+              />
+              <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
+            </MenuItem>
+          </div>
         </>
       )}
       {enableTranslate && (
@@ -609,7 +612,7 @@ function Status({
         </MenuItem>
       )}
       {isSelf && (
-        <>
+        <div class="menu-horizontal">
           <MenuItem
             onClick={() => {
               states.showCompose = {
@@ -643,7 +646,7 @@ function Status({
               <span>Delete…</span>
             </MenuItem>
           )}
-        </>
+        </div>
       )}
     </>
   );