hide label for mobile

apps/app/src/components/PageComment/SwitchingButtonGroup.module.scss

@@ -5,10 +5,10 @@
   .btn {
     --bs-btn-border-width: 2px;
 
-    width: 110px;
+    width: 60px;
     height: 38px;
 
-    @include bs.media-breakpoint-up(md) {
+    @include bs.media-breakpoint-up(sm) {
       width: 90px;
       height: 30px;
     }

apps/app/src/components/PageComment/SwitchingButtonGroup.tsx

@@ -56,14 +56,16 @@ export const SwitchingButtonGroup = (props: Props): JSX.Element => {
         className="px-2"
         onClick={() => onSelected?.(false)}
       >
-        <span className="material-symbols-outlined me-1">edit_square</span>{t('Write')}
+        <span className="material-symbols-outlined me-1">edit_square</span>
+        <span className="d-none d-sm-inline">{t('Write')}</span>
       </SwitchingButton>
       <SwitchingButton
         active={showPreview}
         className="ps-2 pe-3"
         onClick={() => onSelected?.(true)}
       >
-        <span className="material-symbols-outlined me-0">play_arrow</span>{t('Preview')}
+        <span className="material-symbols-outlined me-0">play_arrow</span>
+        <span className="d-none d-sm-inline">{t('Preview')}</span>
       </SwitchingButton>
     </div>
   );