Some minor tweaks

src-web/components/GrpcConnectionLayout.tsx

@@ -214,34 +214,27 @@ export function GrpcConnectionLayout({ style }: Props) {
                       }}
                       alignItems="center"
                       className={classNames(
-                        'px-2 py-1 font-mono text-xs opacity-70',
+                        'px-2 py-1 font-mono',
-                        m === activeMessage && 'bg-highlight !opacity-100',
+                        m === activeMessage && 'bg-highlight',
                       )}
                     >
                       <Icon
                         className={m.isServer ? 'text-blue-600' : 'text-green-600'}
                         icon={m.isServer ? 'arrowBigDownDash' : 'arrowBigUpDash'}
                       />
-                      <div className="w-full truncate">{m.message}</div>
+                      <div className="w-full truncate text-gray-800 text-xs">{m.message}</div>
-                      <div>{format(m.time, 'HH:mm:ss')}</div>
+                      <div className="text-gray-600 text-2xs" title={m.time.toISOString()}>
+                        {format(m.time, 'HH:mm:ss')}
+                      </div>
                     </HStack>
                   ))}
                 </div>
-                <div
+                <div className={classNames(activeMessage ? 'block' : 'hidden')}>
-                  className={classNames(
-                    'transition-all',
-                    activeMessage ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-[100%]',
-                  )}
-                >
                   <div className="pb-1 px-2">
                     <Separator />
                   </div>
-                  <div className="pl-2 pb-1">
+                  <div className="pl-2 pb-1 h-[6rem]">
-                    <JsonAttributeTree
+                    <JsonAttributeTree attrValue={JSON.parse(activeMessage?.message ?? '{}')} />
-                      depth={0}
-                      attrValue={JSON.parse(activeMessage?.message ?? '{}')}
-                      attrKey={''}
-                    />
                   </div>
                   {/*<Editor*/}
                   {/*  className="bg-gray-50 dark:bg-gray-100 max-h-30"*/}

src-web/components/core/CountBadge.tsx

@@ -12,7 +12,7 @@ export function CountBadge({ count, className }: Props) {
       aria-hidden
       className={classNames(
         className,
-        'opacity-70 border border-highlight text-3xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
+        'opacity-70 border border-highlight text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
       )}
     >
       {count}

src-web/components/core/JsonAttributeTree.tsx

@@ -81,7 +81,7 @@ export const JsonAttributeTree = ({ depth = 0, attrKey, attrValue, attrKeyJsonPa
     <div className={classNames(/*depth === 0 && '-ml-4',*/ 'font-mono text-xs')}>
       <div className="flex items-center">
         {isExpandable ? (
-          <button className="group relative flex items-center pl-4" onClick={toggleExpanded}>
+          <button className="group relative flex items-center pl-4 w-full" onClick={toggleExpanded}>
             <Icon
               size="xs"
               icon="chevronRight"

src-web/components/core/Stacks.tsx

@@ -56,7 +56,7 @@ export const VStack = forwardRef(function VStack(
 type BaseStackProps = HTMLAttributes<HTMLElement> & {
   as?: ComponentType | 'ul' | 'label' | 'form';
   space?: keyof typeof gapClasses;
-  alignItems?: 'start' | 'center' | 'stretch';
+  alignItems?: 'start' | 'center' | 'stretch' | 'end';
   justifyContent?: 'start' | 'center' | 'end' | 'between';
 };
 
@@ -75,6 +75,7 @@ const BaseStack = forwardRef(function BaseStack(
         alignItems === 'center' && 'items-center',
         alignItems === 'start' && 'items-start',
         alignItems === 'stretch' && 'items-stretch',
+        alignItems === 'end' && 'items-end',
         justifyContent === 'start' && 'justify-start',
         justifyContent === 'center' && 'justify-center',
         justifyContent === 'end' && 'justify-end',

tailwind.config.cjs

@@ -46,8 +46,9 @@ module.exports = {
       ],
     },
     fontSize: {
-      '3xs': '0.6rem',
+      '4xs': '0.6rem',
-      '2xs': '0.7rem',
+      '3xs': '0.675rem',
+      '2xs': '0.75rem',
       xs: '0.8rem',
       sm: '0.9rem',
       base: '1rem',