improve width and height

apps/app/src/client/components/PageTags/PageTags.tsx

@@ -19,7 +19,7 @@ type Props = {
 }
 
 export const PageTagsSkeleton = (): JSX.Element => {
-  return <Skeleton additionalClass={`${styles['grw-tag-labels-skeleton']} py-1`} />;
+  return <Skeleton additionalClass={`${styles['grw-tag-labels-skeleton']} mb-2`} />;
 };
 
 export const PageTags:FC<Props> = (props: Props) => {
@@ -40,6 +40,8 @@ export const PageTags:FC<Props> = (props: Props) => {
 
   return (
     <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center mb-2 ${printNoneClass}`} data-testid="grw-tag-labels">
+
+      {/* for mobile */}
       <div className="d-flex d-lg-none">
         <NotAvailableForGuest>
           <NotAvailableForReadOnlyUser>
@@ -53,6 +55,8 @@ export const PageTags:FC<Props> = (props: Props) => {
           </NotAvailableForReadOnlyUser>
         </NotAvailableForGuest>
       </div>
+
+      {/* for PC */}
       <div className="d-none d-lg-flex row">
         <div className="mb-2">
           <button

apps/app/src/client/components/PageTags/TagLabels.module.scss

@@ -29,8 +29,12 @@ $grw-tag-label-font-size: 12px;
 
 .grw-tag-labels-skeleton :global {
   width: 137px;
-  height: calc(#{$grw-tag-label-font-size} + #{bs.$badge-padding-y} * 2);
-  font-size: $grw-tag-label-font-size; // set font-size to use the same em value in bs.$badge-padding-y(https://getbootstrap.jp/docs/5.0/components/badge/#variables)
+  height: calc(var(--bs-body-line-height) * 1em);
+
+  @include bs.media-breakpoint-down(md) {
+    width: 42px;
+    height: calc(var(--bs-body-line-height) * 1em + .375rem * 2);
+  }
 }
 
 .grw-tag-icon-button {