github/sim
1
1
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-04-06 03:00:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

clamp logs panel

Browse Source
This commit is contained in:
waleed
2026-03-13 19:44:52 -07:00
parent ed7ac935e4
commit 9953fda800
5 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 && (

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

@@ -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 = () => {

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

@@ -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'

6
apps/sim/stores/logs/store.ts
View File

@@ -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,
/**

6
apps/sim/stores/logs/utils.ts
View File

@@ -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()))