From 996e3ad9b8366057be17fbc2f4eb1e6a3d3bf266 Mon Sep 17 00:00:00 2001
From: Mega Mind <146339422+M3gA-Mind@users.noreply.github.com>
Date: Wed, 27 May 2026 16:06:53 +0530
Subject: [PATCH] fix(ui): equal-height Composio tiles and visible agent icon
 on dark sidebar (#2752)

---
 app/src/pages/Accounts.tsx |  2 +-
 app/src/pages/Skills.tsx   | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/src/pages/Accounts.tsx b/app/src/pages/Accounts.tsx
index a0baeeb41..896ecd8f4 100644
--- a/app/src/pages/Accounts.tsx
+++ b/app/src/pages/Accounts.tsx
@@ -225,7 +225,7 @@ const Accounts = () => {
       {/* Narrow icon rail — always rendered. */}
       <aside className="z-30 flex w-16 flex-none flex-col items-center gap-2 bg-white/60 dark:bg-neutral-900/60 py-3 backdrop-blur-md my-3 ml-3 rounded-2xl border border-stone-200/70 dark:border-neutral-800/70 shadow-soft">
         <RailButton active={isAgentSelected} onClick={selectAgent} tooltip={t('accounts.agent')}>
-          <AgentIcon className="h-9 w-9 rounded-lg" />
+          <AgentIcon className="h-9 w-9 rounded-lg bg-white dark:bg-neutral-200" />
         </RailButton>
 
         {accounts.map(acct => (
diff --git a/app/src/pages/Skills.tsx b/app/src/pages/Skills.tsx
index 3f4bda906..d00853988 100644
--- a/app/src/pages/Skills.tsx
+++ b/app/src/pages/Skills.tsx
@@ -181,7 +181,7 @@ function ComposioConnectorTile({
       onClick={handleClick}
       title={`${meta.name} — ${meta.description}`}
       aria-label={`${meta.name}, ${statusLabel}. ${ctaLabel}.`}
-      className={`group flex flex-col justify-center items-center rounded-2xl border p-3 text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 ${
+      className={`group flex h-full w-full flex-col justify-center items-center rounded-2xl border p-3 text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 ${
         isConnected
           ? 'border-sage-300 bg-sage-50/80 shadow-[0_0_0_1px_rgba(34,197,94,0.12)] hover:bg-sage-50 dark:border-sage-500/30 dark:bg-sage-500/10 dark:hover:bg-sage-500/15'
           : isPending
@@ -1039,9 +1039,15 @@ export default function Skills() {
                       (composioSortedEntries.length > 0 ? (
                         <div
                           className="grid gap-2 sm:gap-3"
-                          style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(5.5rem, 1fr))' }}>
+                          style={{
+                            gridTemplateColumns: 'repeat(auto-fill, minmax(5.5rem, 1fr))',
+                            gridAutoRows: '6.5rem',
+                          }}>
                           {composioSortedEntries.map(({ meta, connection }) => (
-                            <div key={meta.slug} data-testid={`skill-row-composio-${meta.slug}`}>
+                            <div
+                              key={meta.slug}
+                              data-testid={`skill-row-composio-${meta.slug}`}
+                              className="overflow-hidden">
                               <ComposioConnectorTile
                                 meta={meta}
                                 connection={connection}