From 1746bce53374b26d60ebb4a30eacd18ee194e903 Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Tue, 9 Jan 2024 09:44:40 +0900
Subject: [PATCH] feat: smaller note post form in smartphone

---
 README.md                       |  2 --
 src/components/NotePostForm.tsx | 27 ++++++++++++++++++---------
 src/components/SideBar.tsx      | 10 ++--------
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 2175297..0463587 100644
--- a/README.md
+++ b/README.md
@@ -20,8 +20,6 @@ Please note that some files are licensed in other FLOSS licenses.
 Those files contain the license text in the first lines.
 If the file does not have such text, it must be considered licensed in AGPL.
 
-The icon of Rabbit can be used 
-
 ### English
 
 This program is free software: you can redistribute it and/or modify
diff --git a/src/components/NotePostForm.tsx b/src/components/NotePostForm.tsx
index 26d07c1..6ac23da 100644
--- a/src/components/NotePostForm.tsx
+++ b/src/components/NotePostForm.tsx
@@ -395,7 +395,16 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
         />
         <div class="flex items-end justify-end gap-1">
           <Show when={mode() === 'reply' || props.closable}>
-            <button class="flex h-8 w-8 items-center" onClick={() => close()}>
+            <button
+              class="flex items-center"
+              classList={{
+                'h-9': mode() === 'normal',
+                'w-9': mode() === 'normal',
+                'h-8': mode() === 'reply',
+                'w-8': mode() === 'reply',
+              }}
+              onClick={() => close()}
+            >
               <span class="inline-block h-5 w-5 text-fg-secondary/70">
                 <XMark />
               </span>
@@ -406,8 +415,8 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
             ref={emojiPickerPopup.targetRef}
             class="inline-block rounded bg-primary text-primary-fg"
             classList={{
-              'h-8': mode() === 'normal',
-              'w-8': mode() === 'normal',
+              'h-9': mode() === 'normal',
+              'w-9': mode() === 'normal',
               'p-2': mode() === 'normal',
               'h-7': mode() === 'reply',
               'w-7': mode() === 'reply',
@@ -424,8 +433,8 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
             classList={{
               'bg-primary': !contentWarning(),
               'bg-primary-hover': contentWarning(),
-              'h-8': mode() === 'normal',
-              'w-8': mode() === 'normal',
+              'h-9': mode() === 'normal',
+              'w-9': mode() === 'normal',
               'p-2': mode() === 'normal',
               'h-7': mode() === 'reply',
               'w-7': mode() === 'reply',
@@ -446,8 +455,8 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
             classList={{
               'bg-primary-disabled': fileUploadDisabled(),
               'bg-primary': !fileUploadDisabled(),
-              'h-8': mode() === 'normal',
-              'w-8': mode() === 'normal',
+              'h-9': mode() === 'normal',
+              'w-9': mode() === 'normal',
               'p-2': mode() === 'normal',
               'h-7': mode() === 'reply',
               'w-7': mode() === 'reply',
@@ -466,8 +475,8 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
             classList={{
               'bg-primary-disabled': submitDisabled(),
               'bg-primary': !submitDisabled(),
-              'h-8': mode() === 'normal',
-              'w-8': mode() === 'normal',
+              'h-9': mode() === 'normal',
+              'w-9': mode() === 'normal',
               'h-7': mode() === 'reply',
               'w-7': mode() === 'reply',
             }}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index b67b822..9b6448f 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -142,13 +142,7 @@ const SideBar: Component = () => {
           <SearchButton />
         </div>
         <div class="grow" />
-        <div
-          class="flex w-full flex-col items-center gap-2"
-          classList={{
-            'pb-2': !(isMediaSm() && (formOpened() || config().keepOpenPostForm)),
-            'pb-44': isMediaSm() && (formOpened() || config().keepOpenPostForm),
-          }}
-        >
+        <div class="flex w-full flex-col items-center gap-2 pb-2">
           <button
             class="flex w-full flex-col items-center py-1 text-primary hover:text-primary-hover"
             onClick={() => showAddColumn()}
@@ -194,7 +188,7 @@ const SideBar: Component = () => {
         }
       >
         <div
-          class="absolute bottom-0 z-10 w-full border-t border-border bg-r-sidebar px-2 pt-2"
+          class="absolute bottom-0 left-20 z-10 w-[calc(100vw-8rem)] rounded-md border-t border-border bg-r-sidebar px-2 pt-2 shadow"
           classList={{
             static: formOpened() || config().keepOpenPostForm,
             hidden: !(formOpened() || config().keepOpenPostForm),