improvement(byok): updated styling for byok page

[waleedlatif1]

Summary

• updated styling for byok page

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 25, 2025 4:31pm

[greptile-apps]

Greptile Summary

This PR improves the BYOK page UI with several styling and UX enhancements:

• Improved provider card layout with better text truncation using min-w-0 and truncate classes to prevent overflow
• Unified button styling using brand-tertiary-2 color for primary actions ("Add Key", "Save", "Delete") to maintain visual consistency
• Enhanced button layout with proper spacing and flex-shrink-0 to prevent button wrapping
• Added input field label "Enter your API key" for better accessibility
• Implemented browser autofill prevention using hidden decoy fields and input attributes (autoComplete='off', data-lpignore='true', data-form-type='other')
• Removed unused Trash icon import
• Removed unnecessary padding from provider card containers for a cleaner layout
• Changed description/masked key display to show in a single line with proper truncation

All changes follow the established styling patterns in the codebase, using exact pixel values and CSS variables as per the project guidelines.

Confidence Score: 5/5

• This PR is safe to merge with no risks
• The changes are purely cosmetic styling improvements that follow established patterns in the codebase. The modifications include layout improvements, consistent button styling, text truncation fixes, and browser autofill prevention - all of which enhance UX without affecting functionality. No logic changes were made, and the styling approach using !important with CSS variables is consistent with other settings components in the workspace.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx	Improved BYOK UI layout, button styling, text truncation, and added input autofill prevention attributes

Sequence Diagram

sequenceDiagram
    participant User
    participant BYOK Component
    participant Modal
    participant API

    User->>BYOK Component: View provider list
    BYOK Component->>BYOK Component: Render provider cards with improved layout
    
    alt No API Key Exists
        BYOK Component->>User: Show "Add Key" button (brand-tertiary-2 styling)
        User->>BYOK Component: Click "Add Key"
    else API Key Exists
        BYOK Component->>User: Show masked key with "Update" and "Delete" buttons
        User->>BYOK Component: Click "Update" or "Delete"
    end
    
    BYOK Component->>Modal: Open edit modal
    Modal->>User: Display API key input with autofill prevention
    User->>Modal: Enter API key
    User->>Modal: Click "Save" (brand-tertiary-2 styling)
    Modal->>API: Upsert BYOK key
    API->>Modal: Success response
    Modal->>BYOK Component: Close modal and refresh
    BYOK Component->>User: Display updated provider with masked key

Loading