improve button opacity

apps/app/src/client/components/ReactMarkdownComponents/DrawioViewerWithEditButton.module.scss

@@ -1,3 +1,5 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+
 .drawio-viewer-with-edit-button :global {
   position: relative;
 
@@ -6,9 +8,11 @@
     top: 11px;
     right: 10px;
     z-index: 14;
-    font-size: 12px;
-    line-height: 1;
     opacity: 0;
+
+    @include bs.media-breakpoint-down(lg) {
+      opacity: 0.6;
+    }
   }
 }
 

apps/app/src/client/components/ReactMarkdownComponents/DrawioViewerWithEditButton.tsx

@@ -64,7 +64,7 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
       { showEditButton && (
         <button
           type="button"
-          className="btn btn-outline-secondary btn-edit-drawio"
+          className="btn btn-sm btn-outline-secondary btn-edit-drawio"
           onClick={editButtonClickHandler}
         >
           <span className="material-symbols-outlined me-1">edit_square</span>{t('Edit')}

apps/app/src/client/components/ReactMarkdownComponents/TableWithEditButton.module.scss

@@ -1,3 +1,5 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+
 /**
  * for table with handsontable modal button
  */
@@ -6,7 +8,7 @@
 
   .handsontable-modal-trigger {
     position: absolute;
-    top: 11px;
+    top: 8px;
     right: 10px;
     padding: 0;
     font-size: 16px;
@@ -15,6 +17,10 @@
     background-color: transparent;
     border: none;
     opacity: 0;
+
+    @include bs.media-breakpoint-down(lg) {
+      opacity: 0.5;
+    }
   }
 }
 

apps/app/src/components/PageView/PageView.module.scss

@@ -1,6 +0,0 @@
-// mobile
-.page-mobile :global {
-  .editable-with-handsontable .handsontable-modal-trigger {
-    opacity: 0.3;
-  }
-}

apps/app/src/components/PageView/PageView.tsx

@@ -16,7 +16,6 @@ import {
 } from '~/stores-universal/context';
 import { useSWRxCurrentPage, useIsNotFound } from '~/stores/page';
 import { useViewOptions } from '~/stores/renderer';
-import { useIsMobile } from '~/stores/ui';
 
 import { UserInfo } from '../User/UserInfo';
 
@@ -26,9 +25,6 @@ import { PageViewLayout } from './PageViewLayout';
 import RevisionRenderer from './RevisionRenderer';
 
 
-import styles from './PageView.module.scss';
-
-
 const NotCreatablePage = dynamic(() => import('~/client/components/NotCreatablePage').then(mod => mod.NotCreatablePage), { ssr: false });
 const ForbiddenPage = dynamic(() => import('~/client/components/ForbiddenPage'), { ssr: false });
 const NotFoundPage = dynamic(() => import('~/client/components/NotFoundPage'), { ssr: false });
@@ -62,7 +58,6 @@ export const PageView = (props: Props): JSX.Element => {
   const { data: isForbidden } = useIsForbidden();
   const { data: isNotCreatable } = useIsNotCreatable();
   const { data: isNotFoundMeta } = useIsNotFound();
-  const { data: isMobile } = useIsMobile();
 
   const { data: pageBySWR } = useSWRxCurrentPage();
   const { data: viewOptions } = useViewOptions();
@@ -159,8 +154,6 @@ export const PageView = (props: Props): JSX.Element => {
     );
   };
 
-  const mobileClass = isMobile ? styles['page-mobile'] : '';
-
   return (
     <PageViewLayout
       className={className}
@@ -175,7 +168,7 @@ export const PageView = (props: Props): JSX.Element => {
       {specialContents == null && (
         <>
           {(isUsersHomepagePath && page?.creator != null) && <UserInfo author={page.creator} />}
-          <div className={`flex-expand-vert ${mobileClass}`}>
+          <div className="flex-expand-vert">
             <Contents />
           </div>
         </>