From c7db204d5b17ee72c09ef141e856d2af5a791497 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 10 Apr 2023 01:21:02 +0800
Subject: [PATCH] More compact menu items

---
 src/app.css               | 12 ++++++
 src/components/status.jsx | 83 ++++++++++++++++++++-------------------
 2 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/app.css b/src/app.css
index 2b485444..cbc12749 100644
--- a/src/app.css
+++ b/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;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 4a266c87..3bdd3a42 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -462,12 +462,13 @@ function Status({
       )}
       {!isSizeLarge && sameInstance && (
         <>
-          <MenuItem onClick={replyStatus}>
-            <Icon icon="reply" />
-            <span>Reply</span>
-          </MenuItem>
-          {canBoost && (
+          <div class="menu-horizontal">
+            <MenuItem onClick={replyStatus}>
+              <Icon icon="reply" />
+              <span>Reply</span>
+            </MenuItem>
             <MenuItem
+              disabled={!canBoost}
               onClick={async () => {
                 try {
                   const done = await boostStatus();
@@ -485,41 +486,43 @@ function Status({
               />
               <span>{reblogged ? 'Unboost' : 'Boost…'}</span>
             </MenuItem>
-          )}
-          <MenuItem
-            onClick={() => {
-              try {
-                favouriteStatus();
-                if (!isSizeLarge)
-                  showToast(favourited ? 'Unfavourited' : 'Favourited');
-              } catch (e) {}
-            }}
-          >
-            <Icon
-              icon="heart"
-              style={{
-                color: favourited && 'var(--favourite-color)',
+          </div>
+          <div class="menu-horizontal">
+            <MenuItem
+              onClick={() => {
+                try {
+                  favouriteStatus();
+                  if (!isSizeLarge)
+                    showToast(favourited ? 'Unfavourited' : 'Favourited');
+                } catch (e) {}
               }}
-            />
-            <span>{favourited ? 'Unfavourite' : 'Favourite'}</span>
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              try {
-                bookmarkStatus();
-                if (!isSizeLarge)
-                  showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked');
-              } catch (e) {}
-            }}
-          >
-            <Icon
-              icon="bookmark"
-              style={{
-                color: bookmarked && 'var(--link-color)',
+            >
+              <Icon
+                icon="heart"
+                style={{
+                  color: favourited && 'var(--favourite-color)',
+                }}
+              />
+              <span>{favourited ? 'Unfavourite' : 'Favourite'}</span>
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                try {
+                  bookmarkStatus();
+                  if (!isSizeLarge)
+                    showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked');
+                } catch (e) {}
               }}
-            />
-            <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
-          </MenuItem>
+            >
+              <Icon
+                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>
       )}
     </>
   );