From 9de2e6a8510d4ec6647ff13ce99bd9e8c22b197a Mon Sep 17 00:00:00 2001
From: Tommaso Casaburi <tom@bitsocial.net>
Date: Tue, 9 Jun 2026 16:51:35 +0700
Subject: [PATCH] fix(failed-publish): keep bracket actions on one line

Replace mobile-only line breaks with CSS so retry/delete actions wrap
as a block without splitting bracket labels across lines.
---
 src/components/failed-publish-notice.tsx | 34 +++++++++++-------------
 src/views/post/post.module.css           |  6 +++++
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/failed-publish-notice.tsx b/src/components/failed-publish-notice.tsx
index 3eaa95c7..0299d586 100644
--- a/src/components/failed-publish-notice.tsx
+++ b/src/components/failed-publish-notice.tsx
@@ -1,5 +1,4 @@
 import styles from '../views/post/post.module.css';
-import useIsMobile from '../hooks/use-is-mobile';
 
 interface FailedPublishNoticeProps {
   isDeleting: boolean;
@@ -9,33 +8,30 @@ interface FailedPublishNoticeProps {
 }
 
 const FailedPublishNotice = ({ isDeleting, isRetrying = false, onDelete, onRetry }: FailedPublishNoticeProps) => {
-  const isMobile = useIsMobile();
   const isBusy = isDeleting || isRetrying;
 
   return (
     <span className={styles.failedPublishNotice}>
-      This post failed to publish, it's not visible to other users.{' '}
-      {isMobile && (
-        <>
-          <br />
-          <br />
-        </>
-      )}
-      {onRetry && (
+      This post failed to publish, it's not visible to other users.
+      <span className={styles.failedPublishActions}>
+        {onRetry && (
+          <>
+            <span className={styles.failedDeletePostAction}>
+              <span className={styles.failedDeletePostBracket}>[</span>
+              <button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onRetry}>
+                Retry Publish
+              </button>
+              <span className={styles.failedDeletePostBracket}>]</span>
+            </span>{' '}
+          </>
+        )}
         <span className={styles.failedDeletePostAction}>
           <span className={styles.failedDeletePostBracket}>[</span>
-          <button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onRetry}>
-            Retry Publish
+          <button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onDelete}>
+            Delete Post
           </button>
           <span className={styles.failedDeletePostBracket}>]</span>
         </span>
-      )}{' '}
-      <span className={styles.failedDeletePostAction}>
-        <span className={styles.failedDeletePostBracket}>[</span>
-        <button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onDelete}>
-          Delete Post
-        </button>
-        <span className={styles.failedDeletePostBracket}>]</span>
       </span>
     </span>
   );
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 75aada2a..85599226 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -671,8 +671,14 @@
   font-weight: 700;
 }
 
+.failedPublishActions {
+  display: block;
+  margin-top: 5px;
+}
+
 .failedDeletePostAction {
   font-weight: 400;
+  white-space: nowrap;
 }
 
 .failedDeletePostBracket {