Stacks and InlineCode

apps/yaak-client/components/core/EventViewer.tsx

@@ -1,4 +1,6 @@
 import type { Virtualizer } from '@tanstack/react-virtual';
+import { Banner, HStack, SplitLayout } from '@yaakapp-internal/ui';
+import classNames from 'classnames';
 import { format } from 'date-fns';
 import type { ReactNode } from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -6,11 +8,8 @@ import { useEventViewerKeyboard } from '../../hooks/useEventViewerKeyboard';
 import { CopyIconButton } from '../CopyIconButton';
 import { AutoScroller } from './AutoScroller';
 import { Button } from './Button';
-import { Separator } from './Separator';
-import { Banner, SplitLayout } from '@yaakapp-internal/ui';
-import { HStack } from './Stacks';
 import { IconButton } from './IconButton';
-import classNames from 'classnames';
+import { Separator } from './Separator';
 
 interface EventViewerProps<T> {
   /** Array of events to display */
@@ -188,7 +187,11 @@ export function EventViewer<T>({
                     <Separator />
                   </div>
                   <div className="mx-2 overflow-y-auto">
-                    {renderDetail({ event: activeEvent, index: activeIndex ?? 0, onClose: handleClose })}
+                    {renderDetail({
+                      event: activeEvent,
+                      index: activeIndex ?? 0,
+                      onClose: handleClose,
+                    })}
                   </div>
                 </div>
               )
@@ -248,8 +251,21 @@ export function EventDetailHeader({
         {formattedTime && (
           <span className="text-text-subtlest font-mono text-editor ml-2">{formattedTime}</span>
         )}
-        <div className={classNames(copyText != null || formattedTime || (actions ?? []).length > 0 && "border-l border-l-surface-highlight ml-2 pl-3")}>
-        <IconButton color="custom" className="text-text-subtle -mr-3" size="xs" icon="x" title="Close event panel" onClick={onClose} />
+        <div
+          className={classNames(
+            copyText != null ||
+              formattedTime ||
+              ((actions ?? []).length > 0 && 'border-l border-l-surface-highlight ml-2 pl-3'),
+          )}
+        >
+          <IconButton
+            color="custom"
+            className="text-text-subtle -mr-3"
+            size="xs"
+            icon="x"
+            title="Close event panel"
+            onClick={onClose}
+          />
         </div>
       </HStack>
     </div>