feat: add sidebar mode description with small screen

apps/app/public/static/locales/en_US/translation.json

@@ -254,7 +254,7 @@
     "side_bar_mode": {
       "settings": "Sidebar mode settings",
       "side_bar_mode_setting": "Set the sidebar mode",
-      "description": "You can set whether the sidebar is always open or not."
+      "description": "You can set whether or not the sidebar will always be open when the screen width is large. If the screen width is small, the sidebar will always be closed."
     }
   },
   "editor_settings": {

apps/app/public/static/locales/ja_JP/translation.json

@@ -255,7 +255,7 @@
     "side_bar_mode": {
       "settings": "サイドバーモードの設定",
       "side_bar_mode_setting": "サイドバーのモードを設定する",
-      "description": "サイドバーを常時開いた状態にするかどうかを設定できます。"
+      "description": "画面幅が大きい場合に、サイドバーを常時開いた状態にするかどうかを設定できます。画面幅が小さい場合はサイドバーは常に閉じた状態となります。"
     }
   },
   "editor_settings": {

apps/app/public/static/locales/zh_CN/translation.json

@@ -245,7 +245,7 @@
     "side_bar_mode": {
       "settings": "侧边栏模式设置",
       "side_bar_mode_setting": "设置侧边栏模式",
-      "description": "您可以设置侧边栏是否始终保持打开状态。"
+      "description": "您可以设置当屏幕宽度较大时，侧边栏是否始终打开。 如果屏幕宽度较小，侧边栏将始终关闭。"
     }
   },
   "editor_settings": {

apps/app/src/components/Me/UISettings.tsx

@@ -90,32 +90,25 @@ export const UISettings = (): JSX.Element => {
 
   return (
     <>
-      {/* TODO: Only sidebar settings should be hidden, not all UI settings.
-    https://github.com/weseek/growi/pull/8288/files#r1410147053 */}
-      { sidebarMode != null && !isDrawerMode() && (
-        <>
-          <h2 className="border-bottom mb-4">{t('ui_settings.ui_settings')}</h2>
+      <h2 className="border-bottom mb-4">{t('ui_settings.ui_settings')}</h2>
 
-          <div className="row justify-content-center">
-            <div className="col-md-6">
+      <div className="row justify-content-center">
+        <div className="col-md-6">
 
-              { renderSidebarModeSwitch() }
+          { renderSidebarModeSwitch() }
 
-              <div>
-              </div>
-            </div>
-          </div>
-
-          <div className="row my-3">
-            <div className="offset-4 col-5">
-              <button data-testid="" type="button" className="btn btn-primary" onClick={updateButtonHandler}>
-                {t('Update')}
-              </button>
-            </div>
+          <div>
           </div>
-        </>
-      ) }
+        </div>
+      </div>
 
+      <div className="row my-3">
+        <div className="offset-4 col-5">
+          <button data-testid="" type="button" className="btn btn-primary" onClick={updateButtonHandler}>
+            {t('Update')}
+          </button>
+        </div>
+      </div>
     </>
   );
 };