From 087e282677310a61f039966b820dec947fcf7573 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 27 Oct 2023 23:03:07 +0800
Subject: [PATCH] Show/hide the switch-view button based on viewport width

---
 src/app.css          | 5 ++++-
 src/pages/status.jsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index e0d41fa0..73507eda 100644
--- a/src/app.css
+++ b/src/app.css
@@ -928,10 +928,13 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .deck-backdrop .deck .status {
   max-width: var(--main-width);
 }
-.deck-backdrop .deck .menu-switch-view {
+.deck-backdrop .deck :is(.button-switch-view, menu-switch-view) {
   display: none;
 }
 @media (min-width: 40em) {
+  .deck-backdrop .deck .button-switch-view {
+    display: inline-block;
+  }
   .deck-backdrop .deck .menu-switch-view {
     display: flex;
   }
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 13be215a..3b625c03 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -1003,7 +1003,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
           <div class="header-side">
             <button
               type="button"
-              class="plain4"
+              class="plain4 button-switch-view"
               style={{
                 display: viewMode === 'full' ? '' : 'none',
               }}