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

@@ -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;