fix(ui): scroll guard, credentials UX, design token fixes, input padding

- logs: only scroll-into-view on keyboard nav, not on click selection
- resource: stable scrollbar gutter, wider first column
- credentials: toast success/error feedback, remove useMemo for personalEnvData,
  allow editing conflict rows, fix disabled state visibility, use --text-error token
- integrations: use --text-error token for error state
- input: increase right padding (px-2 → pl-2 pr-3)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx

@@ -313,7 +313,10 @@ export const ResourceTable = memo(function ResourceTable({
           </thead>
         </table>
       </div>
-      <div className='min-h-0 flex-1 overflow-auto' onScroll={handleBodyScroll}>
+      <div
+        className='min-h-0 flex-1 overflow-auto [scrollbar-gutter:stable]'
+        onScroll={handleBodyScroll}
+      >
         <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <tbody>
@@ -562,7 +565,7 @@ const ResourceColGroup = memo(function ResourceColGroup({
           key={col.id}
           style={
             colIdx === 0
-              ? { minWidth: 200 * (col.widthMultiplier ?? 1) }
+              ? { width: 400 * (col.widthMultiplier ?? 1) }
               : { width: 160 * (col.widthMultiplier ?? 1) }
           }
         />

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -290,6 +290,7 @@ export default function Logs() {
   const logsRef = useRef<WorkflowLog[]>([])
   const selectedLogIndexRef = useRef(-1)
   const selectedLogIdRef = useRef<string | null>(null)
+  const shouldScrollIntoViewRef = useRef(false)
   const logsRefetchRef = useRef<() => void>(() => {})
   const activeLogRefetchRef = useRef<() => void>(() => {})
   const logsQueryRef = useRef({ isFetching: false, hasNextPage: false, fetchNextPage: () => {} })
@@ -467,13 +468,15 @@ export default function Logs() {
     const idx = selectedLogIndexRef.current
     const currentLogs = logsRef.current
     if (idx < currentLogs.length - 1) {
+      shouldScrollIntoViewRef.current = true
       dispatch({ type: 'SELECT_LOG', logId: currentLogs[idx + 1].id })
     }
   }, [])
 
   const handleNavigatePrev = useCallback(() => {
     const idx = selectedLogIndexRef.current
     if (idx > 0) {
+      shouldScrollIntoViewRef.current = true
       dispatch({ type: 'SELECT_LOG', logId: logsRef.current[idx - 1].id })
     }
   }, [])
@@ -594,7 +597,8 @@ export default function Logs() {
   })
 
   useEffect(() => {
-    if (!selectedLogId) return
+    if (!selectedLogId || !shouldScrollIntoViewRef.current) return
+    shouldScrollIntoViewRef.current = false
     const row = document.querySelector(`[data-row-id="${selectedLogId}"]`) as HTMLElement | null
     if (row) {
       row.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
@@ -713,6 +717,7 @@ export default function Logs() {
 
       if (currentIndex === -1 && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
         e.preventDefault()
+        shouldScrollIntoViewRef.current = true
         dispatch({ type: 'SELECT_LOG', logId: currentLogs[0].id })
         return
       }

apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx

@@ -22,6 +22,7 @@ import {
   Textarea,
   Tooltip,
   Trash,
+  toast,
 } from '@/components/emcn'
 import { Input } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
@@ -60,7 +61,6 @@ const logger = createLogger('SecretsManager')
 
 const GRID_COLS = 'grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_auto_auto] items-center'
 const COL_SPAN_ALL = 'col-span-5'
-const CONFLICT_CLASS = 'border-[var(--text-error)] bg-[var(--error-muted)]'
 
 const ROLE_OPTIONS = [
   { value: 'member', label: 'Member' },
@@ -402,7 +402,6 @@ export function CredentialsManager() {
   const isWorkspaceAdmin = workspacePermissions?.viewer?.isAdmin ?? false
 
   const isLoading = isPersonalLoading || isWorkspaceLoading
-  const variables = useMemo(() => personalEnvData || {}, [personalEnvData])
 
   const [envVars, setEnvVars] = useState<UIEnvironmentVariable[]>([])
   const [newWorkspaceRows, setNewWorkspaceRows] = useState<UIEnvironmentVariable[]>([
@@ -591,7 +590,7 @@ export function CredentialsManager() {
   useEffect(() => {
     if (hasSavedRef.current) return
 
-    const existingVars = Object.values(variables)
+    const existingVars = Object.values(personalEnvData || {})
     const initialVars = [
       ...existingVars.map((envVar) => ({
         ...envVar,
@@ -601,7 +600,7 @@ export function CredentialsManager() {
     ]
     initialVarsRef.current = JSON.parse(JSON.stringify(initialVars))
     setEnvVars(JSON.parse(JSON.stringify(initialVars)))
-  }, [variables])
+  }, [personalEnvData])
 
   useEffect(() => {
     if (!workspaceEnvData) return
@@ -1041,11 +1040,15 @@ export function CredentialsManager() {
 
       setWorkspaceVars(mergedWorkspaceVars)
       setNewWorkspaceRows([createEmptyEnvVar()])
+      if (mutations.length > 0) {
+        toast.success('Secrets saved')
+      }
     } catch (error) {
       hasSavedRef.current = false
       initialVarsRef.current = prevInitialVars
       initialWorkspaceVarsRef.current = prevInitialWorkspaceVars
       logger.error('Failed to save environment variables:', error)
+      toast.error('Failed to save secrets')
     } finally {
       if (mutations.length > 0) {
         queryClient.invalidateQueries({ queryKey: workspaceCredentialKeys.lists() })
@@ -1095,7 +1098,7 @@ export function CredentialsManager() {
           onFocus={(e) => e.target.removeAttribute('readOnly')}
           className={cn(
             'h-9',
-            isConflict && CONFLICT_CLASS,
+            isConflict && 'border-[var(--text-error)]',
             keyError && 'border-[var(--text-error)]'
           )}
         />
@@ -1115,8 +1118,6 @@ export function CredentialsManager() {
           onBlur={() => setFocusedValueIndex(null)}
           onPaste={(e) => handlePaste(e, originalIndex)}
           placeholder={isConflict ? 'Workspace override active' : 'Enter value'}
-          disabled={isConflict}
-          aria-disabled={isConflict}
           name={`env_variable_value_${envVar.id || originalIndex}_${Math.random()}`}
           autoComplete='off'
           autoCapitalize='off'
@@ -1125,12 +1126,11 @@ export function CredentialsManager() {
           style={maskedValueStyle}
           className={cn(
             'h-9',
-            !isComplete && 'col-span-2',
-            isConflict && 'cursor-not-allowed',
-            isConflict && CONFLICT_CLASS
+            (!isComplete || isConflict) && 'col-span-2',
+            isConflict && 'cursor-not-allowed opacity-50'
           )}
         />
-        {isComplete && (
+        {isComplete && !isConflict && (
           <Button
             variant='default'
             onClick={() => handleViewDetails(envVar.key, 'env_personal')}
@@ -1267,7 +1267,7 @@ export function CredentialsManager() {
               </div>
 
               {detailsError && (
-                <div className='rounded-lg border border-[color-mix(in_srgb,var(--status-red)_40%,transparent)] bg-[color-mix(in_srgb,var(--status-red)_10%,transparent)] px-2.5 py-2 text-[var(--status-red)] text-small'>
+                <div className='rounded-lg border border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-2.5 py-2 text-[var(--text-error)] text-small'>
                   {detailsError}
                 </div>
               )}
@@ -1299,7 +1299,7 @@ export function CredentialsManager() {
                             </AvatarFallback>
                           </Avatar>
                           <div className='min-w-0'>
-                            <p className='truncate font-medium text-[var(--text-primary)] text-sm'>
+                            <p className='truncate font-medium text-[var(--text-primary)] text-small'>
                               {member.userName || member.userEmail || member.userId}
                             </p>
                             <p className='truncate text-[var(--text-tertiary)] text-caption'>

apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx

@@ -1288,7 +1288,7 @@ export function IntegrationsManager() {
               </div>
 
               {detailsError && (
-                <div className='rounded-lg border border-[color-mix(in_srgb,var(--status-red)_40%,transparent)] bg-[color-mix(in_srgb,var(--status-red)_10%,transparent)] px-2.5 py-2 text-[var(--status-red)] text-small'>
+                <div className='rounded-lg border border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-2.5 py-2 text-[var(--text-error)] text-small'>
                   {detailsError}
                 </div>
               )}

apps/sim/components/emcn/components/input/input.tsx

@@ -26,7 +26,7 @@ import { cn } from '@/lib/core/utils/cn'
  * Currently supports a 'default' variant.
  */
 const inputVariants = cva(
-  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] pl-2 pr-3 py-1.5 font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {