Savia Web

Deberíamos optimizar la pantalla de búsqueda de algunas pantallas
Deberiamos comenzar a agrandar el ancho utilizable del sistema, actualmente usan en los monitores , uan resolucion de 1920x1080

Segun GPT no hace falta ir 100% responsive para “ensanchar” y que deje de verse angosto.

Acá tenés un plan rápido y con bajo impacto (en orden de ROI):

1) Pasar de “fijo 1080” a “fluido con límites”

La idea es: usar más ancho cuando hay, pero sin reventar pantallas chicas.
Definí un contenedor principal con:
width: 100%
max-width: 1600px (o 1440/1700 según te guste)
centrado con margin: 0 auto
min-width: 1200px (si querés evitar que se rompa en notebooks)

Ejemplo CSS global:

• contenedor principal
  .app-shell{
  width: 100%;
  max-width: 1600px;
  min-width: 1200px;
  margin: 0 auto;
  padding: 0 16px; / margen interno */
  }

Y envolvés tu layout raíz con un <div sclass="app-shell"> ... </div>.

Resultado: en 1920 se ensancha sin tocar 300 pantallas.
En 1366 sigue entrando (si ponés min-width 1200).
Si alguien tiene pantalla chica, aparece scroll horizontal (mejor eso a que se rompa).

2) Mantener “fijo” pero subir el ancho base (si querés lo más simple)

Si hoy tenés algo tipo width: 1080px;, podés cambiarlo a:
1280 / 1366 / 1440 / 1600
Esto es lo menos costoso, pero no aprovecha 1920 al máximo.

3) Atacar solo los “cuellos de botella”: tablares y formularios

Normalmente lo angosto viene de:
Grid/Listbox con columnas rígidas
formularios con Hlayout/Grid con widths fijos
En vez de porcentajes, en ZK podés “fluidificar” con hflex/vflex (es MUCHO más rápido que calcular %):

Para formularios
En inputs/containers: hflex="1"
En labels: ancho fijo chico

Ejemplo:

<hlayout width="100%">
<label value="Nombre" width="120px"/>
<textbox hflex="1"/>
</hlayout>

Para tablas

listbox hflex="1" y columnas críticas con hflex="min" o un width razonable
Evitá 10 columnas con width fija grande; dejá 1–2 columnas “flexibles”.

4) Evitar que “el contenido se pegue” al crecer

Cuando ensanchás, si no ajustás espaciados se ve raro. Con 2–3 reglas globales lo solucionás:

.app-shell .z-window-content,
.app-shell .z-groupbox-content{
padding: 12px 16px;
}

5) Estrategia de migración por fases (sin reescribir todo)

Fase 1 (1–2 días): contenedor fluido + max-width + padding global.
Fase 2: arreglar pantallas top 20% uso (grillas y forms) con hflex="1".
Fase 3: recién ahí “responsive fino” si lo necesitás.

6) Decisión rápida: ¿qué ancho elegir?

Para ERP de escritorio:
max-width: 1600px suele quedar muy bien en 1920.
min-width: 1280px evita que se rompa en notebooks medianas.