fix(docs): reduce oversized screenshots

Author: waleedlatif1

apps/docs/content/docs/agents/skills.mdx

@@ -4,6 +4,7 @@ description: Reusable instruction packages your agents load on demand, managed f
 ---
 
 import { Callout } from 'fumadocs-ui/components/callout'
+import { Image } from '@/components/ui/image'
 
 Agent Skills are reusable packages of instructions that give your AI agents specialized capabilities. Based on the open [Agent Skills](https://agentskills.io) format, skills let you capture domain expertise, workflows, and best practices that agents can load on demand.
 
@@ -93,7 +94,7 @@ Tagging a skill loads its full instructions into the conversation, so Sim follow
 
 Open any **Agent** block and find the **Skills** dropdown below the tools section. Select the skills you want the agent to have access to.
 
-![Add Skill](/static/skills/add-skill.png)
+<Image src="/static/skills/add-skill.png" alt="Add Skill" width={756} height={428} className="mx-auto h-auto w-full max-w-sm" />
 
 Selected skills appear as cards that you can click to edit or remove.
 

apps/docs/content/docs/knowledgebase/connectors.mdx

@@ -14,7 +14,7 @@ Connectors continuously sync documents from external services into your knowledg
 
 ## Available Connectors
 
-<Image src="/static/connectors/connectors-sources.png" alt="The current Connect Source picker showing searchable connectors including Airtable, Asana, Ashby, Azure DevOps, Bitbucket, Box, and ClickUp" width={750} height={680} />
+<Image src="/static/connectors/connectors-sources.png" alt="The current Connect Source picker showing searchable connectors including Airtable, Asana, Ashby, Azure DevOps, Bitbucket, Box, and ClickUp" width={750} height={680} className="mx-auto h-auto w-full max-w-md" />
 
 Sim ships with 64 built-in connectors:
 
@@ -125,7 +125,7 @@ Click **Connect & Sync** to save the connector and trigger the first sync. Docum
 
 Open **Connected Sources** from the knowledge base to see all active connectors. Each card shows the connector's status, the last sync time and document count, and the next scheduled sync:
 
-<Image src="/static/connectors/connectors-sync-history.png" alt="Connected Sources panel showing a Google Docs connector with Active status, last sync details, and a sync history log with dated entries" width={800} height={466} />
+<Image src="/static/connectors/connectors-sync-history.png" alt="Connected Sources panel showing a Google Docs connector with Active status, last sync details, and a sync history log with dated entries" width={800} height={466} className="mx-auto h-auto w-full max-w-xl" />
 
 The action buttons on each connector card:
 
@@ -159,7 +159,7 @@ The log retains the most recent 10 sync runs.
 
 Sometimes a connector syncs documents you don't want in your knowledge base — drafts, templates, confidential pages, and so on. You can exclude them individually.
 
-<Image src="/static/connectors/connectors-excluded.png" alt="Edit Google Docs modal showing the Documents tab with Active (37) and Excluded (0) filter buttons and a 'No excluded documents' message" width={800} height={774} />
+<Image src="/static/connectors/connectors-excluded.png" alt="Edit Google Docs modal showing the Documents tab with Active (37) and Excluded (0) filter buttons and a 'No excluded documents' message" width={800} height={774} className="mx-auto h-auto w-full max-w-md" />
 
 To exclude a document, open the connector's settings modal, go to the **Documents** tab, and click **Exclude** next to any document. Excluded documents are skipped on every subsequent sync even if the source content changes.
 

apps/docs/content/docs/knowledgebase/tags.mdx

@@ -36,11 +36,11 @@ The type dropdown in the creation form shows current slot usage for each type (e
 
 Tag definitions live at the knowledge base level. To manage them, click the knowledge base name in the header to open the context menu and select **Tags**:
 
-<Image src="/static/tags/tags-kb-menu.png" alt="Knowledge base header showing the dropdown menu with Rename, Tags, and Delete options" width={700} height={346} />
+<Image src="/static/tags/tags-kb-menu.png" alt="Knowledge base header showing the dropdown menu with Rename, Tags, and Delete options" width={700} height={346} className="mx-auto h-auto w-full max-w-md" />
 
 This opens the Tags modal, which lists all defined tags and shows how many documents each one is assigned to. Click **Add Tag** to define a new one:
 
-<Image src="/static/tags/tags-create.png" alt="Tags modal showing 0 defined tags, a Tag Name input field, and a Type dropdown set to Text (0/7), with Cancel and Create Tag buttons" width={700} height={471} />
+<Image src="/static/tags/tags-create.png" alt="Tags modal showing 0 defined tags, a Tag Name input field, and a Type dropdown set to Text (0/7), with Cancel and Create Tag buttons" width={700} height={471} className="mx-auto h-auto w-full max-w-md" />
 
 Enter a **Tag Name** and pick a **Type**, then click **Create Tag**. The name must be unique within the knowledge base. The type dropdown only shows types that still have available slots. Press Enter to submit or Escape to cancel.
 

apps/docs/content/docs/logs-debugging/index.mdx

@@ -35,6 +35,7 @@ Open a run and **Log Details** shows the trace. The **Trace** tab lists each blo
   alt="The current Log Details Trace tab showing workflow, agent, model, and tool spans with their durations"
   width={518}
   height={540}
+  className="mx-auto h-auto w-full max-w-md"
 />
 
 This is the level you debug at, because a run fails when one of its blocks fails, and a block usually fails because of the input it received. In this run, one glance at the spans shows where the time went: Agent 1 took 7.84s of the 7.86s total.

apps/docs/content/docs/logs-debugging/logging.mdx

@@ -47,7 +47,7 @@ Click any entry to open its sidebar: the run's timeline (start/end, total durati
     alt="The current Log Details sidebar with run metadata, output, and credit total"
     width={518}
     height={760}
-    className="my-6"
+    className="my-6 mx-auto h-auto w-full max-w-sm"
   />
 </div>
 
@@ -70,7 +70,7 @@ Click any entry to open its sidebar: the run's timeline (start/end, total durati
     alt="Workflow Snapshot"
     width={600}
     height={628}
-    className="my-6"
+    className="my-6 mx-auto h-auto w-full max-w-md"
   />
 </div>
 

apps/docs/content/docs/platform/credentials.mdx

@@ -18,6 +18,7 @@ To manage secrets, open your workspace **Settings** and navigate to the **Secret
   alt="Secrets tab showing Workspace and Personal sections with inline key-value rows"
   width={700}
   height={479}
+  className="mx-auto h-auto w-full max-w-xl"
 />
 
 Secrets are organized into two sections:
@@ -54,6 +55,7 @@ To reference a secret in any input field, type `{{` to open the variable dropdow
   alt="Typing {{ in an input opens a dropdown showing available secrets"
   width={400}
   height={165}
+  className="mx-auto h-auto w-full max-w-[400px]"
 />
 
 Select the secret you want to use. The reference appears highlighted in blue and is resolved to its actual value at runtime.
@@ -63,6 +65,7 @@ Select the secret you want to use. The reference appears highlighted in blue and
   alt="A resolved secret reference shown as {{OPENAI_API_KEY}}"
   width={400}
   height={166}
+  className="mx-auto h-auto w-full max-w-[400px]"
 />
 
 ### Execution log protection
@@ -114,6 +117,7 @@ Click **Details** on any secret row to open its detail view.
   alt="Secret details view showing Key, Value, Description, and Members sections"
   width={700}
   height={351}
+  className="mx-auto h-auto w-full max-w-xl"
 />
 
 From here you can:

apps/docs/content/docs/platform/enterprise/access-control.mdx

@@ -37,7 +37,7 @@ When a user runs a workflow or uses Chat, Sim reads the resolved group's configu
 
 Go to **Settings → Organization → Permission groups** from any workspace in your organization. Permission groups are defined once at the organization level and apply to every workspace under it. Only organization owners and admins can manage them.
 
-<Image src="/static/enterprise/access-control-groups.png" alt="Access Control settings showing a list of permission groups: Contractors, Sales, Engineering, and Marketing, each with Details and Delete actions" width={900} height={477} />
+<Image src="/static/enterprise/access-control-groups.png" alt="Access Control settings showing a list of permission groups: Contractors, Sales, Engineering, and Marketing, each with Details and Delete actions" width={900} height={477} className="mx-auto h-auto w-full max-w-xl" />
 
 ### 2. Create a permission group
 
@@ -59,7 +59,7 @@ A workspace-scoped group with **no members** applies to everyone in its workspac
 
 Controls which AI model providers members of this group can use.
 
-<Image src="/static/enterprise/access-control-model-providers.png" alt="Model Providers tab showing a grid of AI providers including Ollama, vLLM, OpenAI, Anthropic, Google, Azure OpenAI, and others with checkboxes to allow or restrict access" width={900} height={430} />
+<Image src="/static/enterprise/access-control-model-providers.png" alt="Model Providers tab showing a grid of AI providers including Ollama, vLLM, OpenAI, Anthropic, Google, Azure OpenAI, and others with checkboxes to allow or restrict access" width={900} height={430} className="mx-auto h-auto w-full max-w-xl" />
 
 The list shows all providers available in Sim.
 
@@ -89,7 +89,7 @@ Expand an integration block to reach its **tool denylist**. Clearing individual
 
 Controls the modules, actions, and credentials available to group members. Every row refuses at the API, not only in the UI — clearing a box revokes the access; it does not merely hide a tab.
 
-<Image src="/static/enterprise/access-control-platform.png" alt="Platform tab showing feature toggles grouped by category" width={900} height={566} />
+<Image src="/static/enterprise/access-control-platform.png" alt="Platform tab showing feature toggles grouped by category" width={900} height={566} className="mx-auto h-auto w-full max-w-xl" />
 
 **Modules**
 

apps/docs/content/docs/platform/enterprise/audit-logs.mdx

@@ -16,7 +16,7 @@ Audit logs record configuration and security events across your organization, in
 
 Go to **Settings → Organization → Audit logs** in your workspace. Logs are displayed in a table with the following columns:
 
-<Image src="/static/enterprise/audit-logs.png" alt="Audit Logs settings showing a table of events with columns for Timestamp, Event, Description, and Actor, along with search and filter controls" width={900} height={830} />
+<Image src="/static/enterprise/audit-logs.png" alt="Audit Logs settings showing a table of events with columns for Timestamp, Event, Description, and Actor, along with search and filter controls" width={900} height={830} className="mx-auto h-auto w-full max-w-xl" />
 
 | Column | Description |
 |--------|-------------|

apps/docs/content/docs/platform/enterprise/custom-blocks.mdx

@@ -92,7 +92,7 @@ Click **Save changes**. The block is published immediately and becomes available
 
 In the workflow editor, open the block toolbar. Published custom blocks appear under a **Custom blocks** section. Drag one into your workflow like any other block, fill in its inputs (using the placeholders as a guide), and reference its outputs in downstream blocks.
 
-<Image src="/static/enterprise/custom-blocks-toolbar.png" alt="Workflow editor block toolbar with a Custom Blocks section listing two published blocks below Core Blocks" width={400} height={476} />
+<Image src="/static/enterprise/custom-blocks-toolbar.png" alt="Workflow editor block toolbar with a Custom Blocks section listing two published blocks below Core Blocks" width={400} height={476} className="mx-auto h-auto w-full max-w-xs" />
 
 Consumers don't need any access to the source workflow. The block runs on its own, using only the inputs provided, and returns only the outputs you exposed. Its internal steps, models, and intermediate values stay hidden unless the block's publisher turned on **Trace runs in consumer logs**, in which case they appear under the block in the run's trace.
 

apps/docs/content/docs/platform/enterprise/data-drains.mdx

@@ -16,9 +16,9 @@ Drains are independent of [Data Retention](/platform/enterprise/data-retention)
 
 Go to **Settings → Organization → Data drains** in your workspace, then click **New drain**.
 
-<Image src="/static/enterprise/data-drains-list.png" alt="Data Drains settings page showing two configured drains — one exporting workflow logs to Amazon S3 daily, another exporting Chat conversations to an HTTPS webhook hourly" width={900} height={885} />
+<Image src="/static/enterprise/data-drains-list.png" alt="Data Drains settings page showing two configured drains — one exporting workflow logs to Amazon S3 daily, another exporting Chat conversations to an HTTPS webhook hourly" width={900} height={885} className="mx-auto h-auto w-full max-w-md" />
 
-<Image src="/static/enterprise/data-drains-new.png" alt="New data drain dialog with fields for name, source, cadence, destination, and S3 credentials" width={900} height={491} />
+<Image src="/static/enterprise/data-drains-new.png" alt="New data drain dialog with fields for name, source, cadence, destination, and S3 credentials" width={900} height={491} className="mx-auto h-auto w-full max-w-xl" />
 
 Each drain has four pieces: