fix: vertical resizable starts at 50% height

- Add key prop to Resizable to force remount when switching between
  horizontal and vertical modes (defaultSize only applies on mount)
- Change code-wrap from height:100% to flex:1 on mobile so it shares
  space with the Resizable instead of stealing it all
- Reset pre.shiki min-height to 0 on mobile to avoid forcing the code
  panel tall

Author: Huxpro

src/example-preview/components/index.module.scss

@@ -157,18 +157,18 @@
         width: 100% !important;
       }
       pre.shiki {
-        min-height: 371px !important;
+        min-height: 0 !important;
       }
     }
     .code-view-container-tab-show {
       :global {
         pre.shiki {
-          min-height: 324px !important;
+          min-height: 0 !important;
         }
       }
     }
     .code-wrap {
-      height: 100%;
+      flex: 1;
       min-height: 0;
     }
     .preview-wrap .qrcode {
@@ -199,18 +199,18 @@
         width: 100% !important;
       }
       pre.shiki {
-        min-height: 371px !important;
+        min-height: 0 !important;
       }
     }
     .code-view-container-tab-show {
       :global {
         pre.shiki {
-          min-height: 324px !important;
+          min-height: 0 !important;
         }
       }
     }
     .code-wrap {
-      height: 100%;
+      flex: 1;
       min-height: 0;
     }
     .preview-wrap .qrcode {

src/example-preview/components/resizable.tsx

@@ -14,6 +14,7 @@ export const ResizableContainer = ({
   if (vertical) {
     return (
       <Resizable
+        key="vertical"
         style={{
           display: show ? 'block' : 'none',
         }}
@@ -66,6 +67,7 @@ export const ResizableContainer = ({
 
   return (
     <Resizable
+      key="horizontal"
       style={{
         display: show ? 'block' : 'none',
       }}