UI: formularios en desktop, responsividad, colores por ambiente y fixes de navegación - #12
Merged
Merged
Conversation
…onsiveness and input styling - Fix infinite render loop in api-keys page caused by an unstable array reference feeding a useEffect dependency (froze the app and blocked sidebar navigation for accounts with zero applications). - Widen DialogContent default and adapt the "Nueva Aplicacion", application settings, and invite-collaborator forms to use the grid-cols-1 md:grid-cols-2/3 pattern already used in the resource and lock forms, instead of stacking every field on desktop. - Fix responsive gaps in the team page (header, collaborator and invitation rows), dashboard layout padding and mobile sidebar auto-close on navigation, application card height, and stats grid breakpoints. - Align Input/Textarea styling with Select/Button by using the existing --input token and a consistent hover/transition recipe.
…r-coding - Fix "Crear Ambiente" 400 error: backend requires applicationId in the POST body in addition to the path param; add it to the request. - Fix back button and Cancelar on app settings pointing to the applications list instead of back to the app detail page. - Narrow the main dashboard content area (max-w-7xl) so pages don't stretch edge-to-edge on wide screens. - Add a shared getEnvColors() helper (lib/utils.ts) so dev/staging/prod use one consistent color everywhere, and apply it to the app detail page's environment selector, description banner, and resource/lock/ API key list items (plus fix their icon vertical alignment). - Fix the sidebar's per-application environment indicator, which was hardcoded to always show "dev" regardless of the app's real environments; it now reads the real environments from the API and shows a color-coded dot per environment. - Remove the "Documentación" sidebar entry (duplicated with the top navbar link, which now has an icon) and the "Configuración" entry from the top user dropdown (kept only in the sidebar's Cuenta section) to reduce duplication.
- Merge the "Ciclo de Vida" and "Concurrencia" cards into one card with two aligned columns (TTL/Estrategia and Webhook/Idempotencia share the same grid row so they line up), and move "Guardar Metadatos" to its own full-width row below both columns. - Split "Identidad del Recurso" (name/mode/description) into its own top card, since it's naturally taller and was unbalancing a side-by-side split with the other fields. - Give the Switch component a visible border in both states — the unchecked track color was nearly identical to the surrounding card background, making the toggle boundary hard to see.
The --input token was identical to --secondary/--muted/--accent (oklch 0.18), only 0.04 away from --card (0.14) — too close to read clearly as a filled control. Bump it to 0.22 and raise the Input/ Textarea fill opacity (60% default, solid on hover) so fields read as distinct surfaces. Also drop the Switch's dark-mode opacity reduction on its unchecked track, which was fighting against contrast instead of helping.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
There was a problem hiding this comment.
Pull request overview
Actualiza la UI del dashboard para mejorar la experiencia en desktop/mobile, estandariza el color-coding por ambiente (dev/staging/prod) en vistas clave, y corrige bugs de navegación y lógica (incluyendo el loop de render en API Keys).
Changes:
- Mejora de layout/responsividad (formularios, listas y layout general; cierre automático del sidebar mobile al navegar).
- Unificación de colores por ambiente mediante
getEnvColors()y aplicación en sidebar y detalle de aplicación (selector/banner/cards). - Fixes funcionales: body de “Crear Ambiente” incluye
applicationId, navegación “volver” corregida, y estabilización de dependencias enapi-keyspara evitar render loops.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Corrige workspace para que pnpm dev/run funcione (agrega packages). |
| lib/utils.ts | Agrega helper getEnvColors() para colores consistentes por ambiente. |
| components/ui/textarea.tsx | Ajusta estilos para mayor contraste/feedback hover/focus. |
| components/ui/switch.tsx | Ajusta estilos del switch (bordes/estados) para mejor contraste. |
| components/ui/input.tsx | Ajusta estilos del input para mayor contraste/feedback hover/focus. |
| components/ui/dialog.tsx | Aumenta ancho máximo de diálogos (sm:max-w-2xl). |
| components/dashboard/sidebar.tsx | Sidebar refleja ambientes reales por app y actualiza UI de indicador por ambiente. |
| components/dashboard/resource-form.tsx | Reorganiza formulario de recurso en cards/columnas para desktop. |
| components/dashboard/layout.tsx | Padding responsivo y cierre automático del sidebar mobile al cambiar de ruta. |
| components/dashboard/header.tsx | Ajusta padding responsivo y mejora link de documentación (icono + texto). |
| app/globals.css | Ajusta token --input para mejorar contraste. |
| app/dashboard/usage/page.tsx | Mejora truncado/alineación en event log (responsivo). |
| app/dashboard/applications/page.tsx | Ajusta cards para altura mínima (evita rigidez de layout). |
| app/dashboard/applications/new/page.tsx | Layout desktop para selector de ambientes y hace cards 100% clickeables. |
| app/dashboard/applications/[id]/team/page.tsx | Header/listas responsivas + diálogo de invitación en 2 columnas. |
| app/dashboard/applications/[id]/settings/page.tsx | Fix de applicationId en “Crear Ambiente” + navegación de vuelta al detalle + layout 2 columnas. |
| app/dashboard/applications/[id]/page.tsx | Aplica getEnvColors() en selector/banner y en cards de recursos/locks/api keys. |
| app/dashboard/api-keys/page.tsx | Evita loop de render estabilizando environments con useMemo. |
| .claude/launch.json | Agrega configuración de launch para entorno dev con pnpm dev. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+17
to
+19
| // Single source of truth for environment color-coding, shared across the | ||
| // app-creation form, environment lists, and the app detail page so "dev" | ||
| // always reads blue, "staging" yellow, and "prod" green everywhere. |
Comment on lines
+269
to
279
| {!isCollapsed && app.environments.length > 0 && ( | ||
| <span className="flex shrink-0 items-center gap-1"> | ||
| {app.environments.map((env: string) => ( | ||
| <span | ||
| key={env} | ||
| title={env} | ||
| className={cn("h-1.5 w-1.5 rounded-full", getEnvColors(env).dot)} | ||
| /> | ||
| ))} | ||
| </span> | ||
| )} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resumen
Pase de UI/UX sobre el dashboard: formularios adaptados a desktop (dejaron de estar todos en columna única), responsividad verificada/corregida en varias vistas, colores consistentes por ambiente (dev/staging/prod), mejor contraste en inputs y switches, y algunos bugs funcionales encontrados al probar en caliente.
Cambios principales
Bug crítico
api-keys: loop infinito de render que congelaba toda la navegación del sidebar (causado por un array inestable en las dependencias de unuseEffect).Formularios en desktop
sm:max-w-lg→sm:max-w-2xl).Responsividad
Colores por ambiente
getEnvColors()(lib/utils.ts) para que dev/staging/prod usen siempre el mismo color (azul/amarillo/verde) en selector de ambiente, banner de descripción, y cards de recursos/locks/API keys.Contraste de inputs
--inputy se ajustaron las opacidades.Otros bugs
applicationIden el body.Nota
pnpm-workspace.yamlse corrigió (faltaba el campopackages), sin el cualpnpm dev/pnpm runfallaban con "packages field missing or empty" — no relacionado a la UI, pero bloqueaba correr el proyecto localmente.Test plan