clamp logs panel

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -40,6 +40,7 @@ import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { formatCost } from '@/providers/utils'
 import type { WorkflowLog } from '@/stores/logs/filters/types'
 import { useLogDetailsUIStore } from '@/stores/logs/store'
+import { MAX_LOG_DETAILS_WIDTH_RATIO, MIN_LOG_DETAILS_WIDTH } from '@/stores/logs/utils'
 
 /**
  * Workflow Output section with code viewer, copy, search, and context menu functionality
@@ -286,6 +287,9 @@ export const LogDetails = memo(function LogDetails({
   const { handleMouseDown } = useLogDetailsResize()
   const { config: permissionConfig } = usePermissionConfig()
 
+  const maxVw = `${MAX_LOG_DETAILS_WIDTH_RATIO * 100}vw`
+  const effectiveWidth = `clamp(${MIN_LOG_DETAILS_WIDTH}px, ${panelWidth}px, ${maxVw})`
+
   useEffect(() => {
     if (scrollAreaRef.current) {
       scrollAreaRef.current.scrollTop = 0
@@ -346,7 +350,7 @@ export const LogDetails = memo(function LogDetails({
       {isOpen && (
         <div
           className='absolute top-0 bottom-0 z-[60] w-[8px] cursor-ew-resize'
-          style={{ right: `${panelWidth - 4}px` }}
+          style={{ right: `calc(${effectiveWidth} - 4px)` }}
           onMouseDown={handleMouseDown}
           role='separator'
           aria-label='Resize log details panel'
@@ -358,7 +362,7 @@ export const LogDetails = memo(function LogDetails({
         className={`absolute top-[0px] right-0 bottom-0 z-50 transform overflow-hidden border-l bg-[var(--bg)] shadow-md transition-transform duration-200 ease-out ${
           isOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
-        style={{ width: `${panelWidth}px` }}
+        style={{ width: effectiveWidth }}
         aria-label='Log details sidebar'
       >
         {log && (

apps/sim/app/workspace/[workspaceId]/logs/hooks/use-log-details-resize.ts

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useLogDetailsUIStore } from '@/stores/logs/store'
-import { MAX_LOG_DETAILS_WIDTH_RATIO, MIN_LOG_DETAILS_WIDTH } from '@/stores/logs/utils'
 
 /**
  * Hook for handling log details panel resize via mouse drag.
@@ -24,12 +23,8 @@ export function useLogDetailsResize() {
     if (!isResizing) return
 
     const handleMouseMove = (e: MouseEvent) => {
-      // Calculate new width from right edge of window
       const newWidth = window.innerWidth - e.clientX
-      const maxWidth = window.innerWidth * MAX_LOG_DETAILS_WIDTH_RATIO
-      const clampedWidth = Math.max(MIN_LOG_DETAILS_WIDTH, Math.min(newWidth, maxWidth))
-
-      setPanelWidth(clampedWidth)
+      setPanelWidth(newWidth)
     }
 
     const handleMouseUp = () => {

apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx

@@ -247,7 +247,7 @@ export function RecentlyDeleted() {
       </div>
 
       <SModalTabs value={activeTab} onValueChange={(v) => setActiveTab(v as ResourceType)}>
-        <SModalTabsList activeValue={activeTab} className='border-b border-[var(--border)]'>
+        <SModalTabsList activeValue={activeTab} className='border-[var(--border)] border-b'>
           {TABS.map((tab) => (
             <SModalTabsTrigger key={tab.id} value={tab.id}>
               {tab.label}
@@ -259,7 +259,7 @@ export function RecentlyDeleted() {
       <div className='min-h-0 flex-1 overflow-y-auto'>
         {error ? (
           <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-            <p className='text-[11px] leading-tight text-[#DC2626] dark:text-[#F87171]'>
+            <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
               {error instanceof Error ? error.message : 'Failed to load deleted items'}
             </p>
           </div>
@@ -288,8 +288,8 @@ export function RecentlyDeleted() {
                 >
                   <ResourceIcon resource={resource} />
 
-                  <div className='flex flex-col min-w-0 flex-1'>
-                    <span className='text-[13px] font-medium text-[var(--text-primary)] truncate'>
+                  <div className='flex min-w-0 flex-1 flex-col'>
+                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
                       {resource.name}
                     </span>
                     <span className='text-[12px] text-[var(--text-tertiary)]'>
@@ -300,7 +300,7 @@ export function RecentlyDeleted() {
                   </div>
 
                   {isRestored ? (
-                    <div className='flex items-center gap-[8px] shrink-0'>
+                    <div className='flex shrink-0 items-center gap-[8px]'>
                       <span className='text-[13px] text-[var(--text-tertiary)]'>Restored</span>
                       <Button
                         variant='default'

apps/sim/stores/logs/store.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import type { LogDetailsUIState } from './types'
-import { DEFAULT_LOG_DETAILS_WIDTH, getMaxLogDetailsWidth, MIN_LOG_DETAILS_WIDTH } from './utils'
+import { clampPanelWidth, DEFAULT_LOG_DETAILS_WIDTH } from './utils'
 
 export const useLogDetailsUIStore = create<LogDetailsUIState>()(
   persist(
@@ -12,9 +12,7 @@ export const useLogDetailsUIStore = create<LogDetailsUIState>()(
        * @param width - Desired width in pixels for the panel.
        */
       setPanelWidth: (width) => {
-        const maxWidth = getMaxLogDetailsWidth()
-        const clampedWidth = Math.max(MIN_LOG_DETAILS_WIDTH, Math.min(width, maxWidth))
-        set({ panelWidth: clampedWidth })
+        set({ panelWidth: clampPanelWidth(width) })
       },
       isResizing: false,
       /**

apps/sim/stores/logs/utils.ts

@@ -11,3 +11,9 @@ export const MAX_LOG_DETAILS_WIDTH_RATIO = 0.65
  */
 export const getMaxLogDetailsWidth = () =>
   typeof window !== 'undefined' ? window.innerWidth * MAX_LOG_DETAILS_WIDTH_RATIO : 1040
+
+/**
+ * Clamps a width value to the valid panel range for the current viewport.
+ */
+export const clampPanelWidth = (width: number) =>
+  Math.max(MIN_LOG_DETAILS_WIDTH, Math.min(width, getMaxLogDetailsWidth()))