From 13cc7659ea818cfcc274bb2faefbe67f127e44d1 Mon Sep 17 00:00:00 2001
From: jonny <coorhook@gmail.com>
Date: Sun, 22 Mar 2026 20:45:15 +0800
Subject: [PATCH] Add responsive styles for small portrait screens

Introduce a media query for max-width:480px, portrait, touch-only devices to improve layout on small screens. Adjustments include removing body min-width, enabling wrapping and spacing for .common-tools-wrapper, forcing .common-tools-container and .btns-container to full width with flexible sizing, adding bottom margin for .mr-5 elements, and increasing minimum dimensions for #content_submit_text to improve tap targets and prevent overflow.
---
 css/main.css | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/css/main.css b/css/main.css
index b551a32..ee61493 100644
--- a/css/main.css
+++ b/css/main.css
@@ -29,6 +29,38 @@ input:focus::placeholder ,.common-editor-inputer:focus::placeholder {
     line-height: 1.5;
     position: relative;
 }
+
+@media (max-width: 480px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
+    .body{
+        min-width: 0;
+    }
+
+    .common-tools-wrapper {
+        flex-wrap: wrap;
+        align-items: stretch;
+        gap: .75rem .5rem;
+    }
+
+    .common-tools-container {
+        flex: 1 1 100%;
+        min-width: 0;
+        flex-wrap: wrap;
+    }
+
+    .common-tools-container .mr-5 {
+        margin-bottom: .5rem;
+    }
+
+    .btns-container {
+        flex: 1 1 100%;
+        text-align: right;
+    }
+
+    #content_submit_text {
+        min-width: 3rem;
+        min-height: 2.5rem;
+    }
+}
 a{color: #555;}
 .title{
     width: 100px;