db to app_handle!

src-web/components/GrpcConnectionLayout.tsx

@@ -19,7 +19,6 @@ import { RadioDropdown } from './core/RadioDropdown';
 import { Separator } from './core/Separator';
 import { SplitLayout } from './core/SplitLayout';
 import { HStack, VStack } from './core/Stacks';
-import { StatusTag } from './core/StatusTag';
 import { GrpcEditor } from './GrpcEditor';
 import { UrlBar } from './UrlBar';
 
@@ -276,6 +275,7 @@ export function GrpcConnectionLayout({ style }: Props) {
               </Banner>
             ) : messages.length >= 0 ? (
               <SplitLayout
+                forceVertical
                 name={
                   !activeMethod?.clientStreaming && !activeMethod?.serverStreaming
                     ? 'grpc_messages_unary'

src-web/components/core/SplitLayout.tsx

@@ -23,6 +23,7 @@ interface Props {
   defaultRatio?: number;
   minHeightPx?: number;
   minWidthPx?: number;
+  forceVertical?: boolean;
 }
 
 const areaL = { gridArea: 'left' };
@@ -37,6 +38,7 @@ export function SplitLayout({
   secondSlot,
   className,
   name,
+  forceVertical,
   defaultRatio = 0.5,
   minHeightPx = 10,
   minWidthPx = 10,
@@ -66,14 +68,15 @@ export function SplitLayout({
   const styles = useMemo<CSSProperties>(() => {
     return {
       ...style,
-      gridTemplate: vertical
-        ? `
+      gridTemplate:
+        forceVertical || vertical
+          ? `
             ' ${areaL.gridArea}' minmax(0,${1 - height}fr)
             ' ${areaD.gridArea}' 0
             ' ${areaR.gridArea}' minmax(${minHeightPx}px,${height}fr)
             / 1fr            
           `
-        : `
+          : `
             ' ${areaL.gridArea} ${areaD.gridArea} ${areaR.gridArea}' minmax(0,1fr)
             / ${1 - width}fr   0                ${width}fr           
           `,