fix(panel): adjust responsive padding

Author: dvcol

src/components/common/panel/PanelContent.vue

@@ -71,14 +71,15 @@ const onTouchEnd = (e: TouchEvent) => {
     position: sticky;
     top: 1rem;
 
-    @media (width < 725px) {
+    @media (width < 550px) {
       position: inherit;
     }
   }
 
   &-content {
     margin-top: -1.125rem;
     padding: 0 3rem 1.25rem;
+    transition: padding 0.5s var(--n-bezier);
 
     :deep(.n-skeleton) {
       opacity: 1;
@@ -91,7 +92,11 @@ const onTouchEnd = (e: TouchEvent) => {
     }
 
     @media (width < 725px) {
-      padding: 0 0.75rem 1rem;
+      padding: 0 0.75rem 0.5rem;
+    }
+
+    @media (width < 550px) {
+      padding: 0 0.25rem;
     }
   }
 }

src/components/common/panel/PanelHeader.vue

@@ -36,7 +36,7 @@ const { title, url, label } = defineProps({
 .panel-title-skeleton {
   text-align: center;
 
-  @media (width < 725px) {
+  @media (width < 550px) {
     padding: 0 1.5rem;
   }
 }