From da150b8788400c07d7d012636894aa4aef913c7f Mon Sep 17 00:00:00 2001
From: jonny <coorhook@gmail.com>
Date: Sat, 7 Mar 2026 21:18:23 +0800
Subject: [PATCH] Refactor fullscreen button markup, styles, i18n

Replace the old fullscreen localization key and button implementation with an iconized, accessible button and updated styling. Removed fullscreenBtn entries from locale files and updated js/i18n.js to set the fullscreen button's aria-label using tipFullscreen. popup.html now wraps the button in a header and includes an SVG icon; main.css adjusts layout (overflow, sticky header, button positioning, sizing, and hiding in fullscreen) and tweaks editor input spacing for the new layout.
---
 _locales/en/messages.json    |  3 ---
 _locales/ja/messages.json    |  5 +----
 _locales/ko/messages.json    |  7 ++-----
 _locales/zh_CN/messages.json |  3 ---
 css/main.css                 | 37 ++++++++++++++++++++++++++++--------
 js/i18n.js                   |  3 ++-
 popup.html                   |  8 +++++++-
 7 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index f1a1c96..299a1aa 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -164,9 +164,6 @@
    "langKorean": {
       "message": "한국어"
    },
-   "fullscreenBtn": {
-      "message": "Fullscreen"
-   },
    "tipFullscreen": {
       "message": "Open fullscreen editor"
    },
diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json
index 20aafec..8a72cc1 100644
--- a/_locales/ja/messages.json
+++ b/_locales/ja/messages.json
@@ -164,13 +164,10 @@
   "langKorean": {
     "message": "한국어"
   },
-  "fullscreenBtn": {
-    "message": "全画面"
-  },
   "tipFullscreen": {
     "message": "全画面で編集"
   },
   "tipResize": {
     "message": "ドラッグで拡大/縮小（最小：初期サイズ）"
   }
-}
+}
\ No newline at end of file
diff --git a/_locales/ko/messages.json b/_locales/ko/messages.json
index da14da3..882b9d7 100644
--- a/_locales/ko/messages.json
+++ b/_locales/ko/messages.json
@@ -158,19 +158,16 @@
   "langChineseSimplified": {
     "message": "简体中文"
   },
-  "langJapanese": {
+    "langJapanese": {
     "message": "日本語"
   },
   "langKorean": {
     "message": "한국어"
   },
-  "fullscreenBtn": {
-    "message": "전체화면"
-  },
   "tipFullscreen": {
     "message": "전체화면 편집"
   },
   "tipResize": {
     "message": "드래그로 확대/축소(최소: 기본 크기)"
   }
-}
+}
\ No newline at end of file
diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json
index 6f04e1d..8a95351 100644
--- a/_locales/zh_CN/messages.json
+++ b/_locales/zh_CN/messages.json
@@ -164,9 +164,6 @@
    "langKorean": {
       "message": "한국어"
    },
-   "fullscreenBtn": {
-      "message": "全屏"
-   },
    "tipFullscreen": {
       "message": "全屏编辑"
    },
diff --git a/css/main.css b/css/main.css
index 4e22fb6..6a9b183 100644
--- a/css/main.css
+++ b/css/main.css
@@ -51,9 +51,17 @@ a{color: #555;}
 .memo-editor{
     position: relative;
     resize: none;
-    overflow: hidden;
+    overflow: visible;
     box-sizing: border-box;
-    contain: layout paint;
+    contain: layout;
+}
+
+.memo-editor-header{
+    position: sticky;
+    top: .5rem;
+    z-index: 3;
+    height: 0;
+    display: block;
 }
 
 #editor-resize-handle{
@@ -79,6 +87,10 @@ a{color: #555;}
 .body.fullscreen #editor-resize-handle{
     display: none;
 }
+
+.body.fullscreen #fullscreen{
+    display: none;
+}
 .random-item{
     border: 1px solid rgb(229,231,235);
     color: #666;
@@ -99,19 +111,26 @@ a{color: #555;}
 .btns-container{text-align:right;}
 .memo-editor #fullscreen{
     position: absolute;
-    right: .5rem;
-    top: .5rem;
+    right: 0;
+    top: 0;
     z-index: 2;
     border: 1px solid rgb(229,231,235);
     border-radius: .25rem;
     background-color: rgb(255,255,255);
     color: #666;
     font-size: .75rem;
-    line-height: 1.5rem;
-    padding: 0 .4rem;
+    line-height: 1;
+    padding: .25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     cursor: pointer;
     opacity: .9;
 }
+
+.memo-editor #fullscreen svg{
+    display: block;
+}
 .memo-editor #fullscreen:hover{
     opacity: 1;
     background-color: rgb(243,244,246);
@@ -132,8 +151,10 @@ a{color: #555;}
 }
 
 .common-editor-inputer{
-    padding-top: 1.8rem;
-    padding-right: 3.2rem;
+    padding-right: 1.5rem;
+    height: auto;
+    display: block;
+    box-sizing: border-box;
 }
 
 .body.fullscreen{
diff --git a/js/i18n.js b/js/i18n.js
index 870738f..11648ad 100644
--- a/js/i18n.js
+++ b/js/i18n.js
@@ -86,7 +86,8 @@ function applyStaticI18n() {
 	setText('lockPublic', 'lockPublic')
 
 	setText('content_submit_text', 'submitBtn')
-	setText('fullscreen', 'fullscreenBtn')
+	const fullscreen = document.getElementById('fullscreen')
+	if (fullscreen) fullscreen.setAttribute('aria-label', t('tipFullscreen'))
 
 	setPlaceholder('hideInput', 'placeHideInput')
 	setPlaceholder('showInput', 'placeShowInput')
diff --git a/popup.html b/popup.html
index f2df32e..b529bf0 100644
--- a/popup.html
+++ b/popup.html
@@ -51,7 +51,13 @@
     </div>
 
     <div class="memo-editor">
-      <button id="fullscreen" class="action-btn" type="button"></button>
+      <div class="memo-editor-header">
+        <button id="fullscreen" class="action-btn" type="button" aria-label="">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen" viewBox="0 0 16 16">
+            <path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/>
+          </svg>
+        </button>
+      </div>
       <textarea
         class="common-editor-inputer"
         rows="4"