consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(config): prevent device-card text overflow in printer grid

Browse Source 
- Add min-width:0 and overflow-wrap:break-word to .device-card
- Add min-width:0 and overflow-wrap:break-word to .device-card__body
- Prevents grid items from expanding beyond their cell when content is wide
- Bump config.css cache-bust to v=2
This commit is contained in:
consultoria-as
2026-05-18 07:19:37 +00:00
parent 07b9b9130a
commit dbf45e374b
2 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pos/static/css/config.css
View File

@@ -1041,6 +1041,8 @@
gap: var(--space-4); gap: var(--space-4);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: var(--transition-normal); transition: var(--transition-normal);
min-width: 0;
overflow-wrap: break-word;
} }
[data-theme="modern"] .device-card { [data-theme="modern"] .device-card {
@@ -1073,7 +1075,7 @@
stroke-linejoin: round; stroke-linejoin: round;
} }
.device-card__body { flex: 1; } .device-card__body { flex: 1; min-width: 0; overflow-wrap: break-word; }
.device-card__name { .device-card__name {
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);

32
pos/templates/config.html
View File

@@ -13,7 +13,7 @@
<link rel="manifest" href="/pos/static/pwa/manifest.json" /> <link rel="manifest" href="/pos/static/pwa/manifest.json" />
<meta name="theme-color" content="#F5A623" /> <meta name="theme-color" content="#F5A623" />
<link rel="stylesheet" href="/pos/static/css/config.css"> <link rel="stylesheet" href="/pos/static/css/config.css?v=2">
</head> </head>
<body> <body>
@@ -584,7 +584,33 @@
</div> </div>
<!-- =============================================================== <!-- ===============================================================
SECTION 9: MONEDA / CURRENCY SECTION 9: MARCAS DE PARTES PERMITIDAS
=============================================================== -->
<div class="settings-section">
<div class="settings-section__header">
<div class="settings-section__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><polyline points="2 17 12 22 22 17"/></svg>
</div>
<div>
<div class="settings-section__title">Marcas de Partes Permitidas</div>
<div class="settings-section__desc">Selecciona qué marcas de fabricantes aparecen en el catálogo</div>
</div>
</div>
<div class="settings-card">
<div class="settings-card__title">Fabricantes Aftermarket</div>
<div id="allowed-brands-container" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3);margin-top:var(--space-4);max-height:300px;overflow-y:auto;padding:var(--space-3);border:1px solid var(--color-border);background:var(--color-bg-base);">
<p style="color:var(--color-text-muted);font-size:var(--text-body-sm);">Cargando marcas...</p>
</div>
<p style="color:var(--color-text-muted);font-size:var(--text-caption);margin-top:var(--space-2);">Si no seleccionas ninguna, se mostrarán todas las partes.</p>
<div style="margin-top:var(--space-4);display:flex;justify-content:flex-end;">
<button class="btn btn--primary" id="btn-save-allowed-brands">Guardar Marcas</button>
</div>
</div>
</div>
<!-- ===============================================================
SECTION 10: MONEDA / CURRENCY
=============================================================== --> =============================================================== -->
<div class="settings-section"> <div class="settings-section">
<div class="settings-section__header"> <div class="settings-section__header">
@@ -718,7 +744,7 @@
<script src="/pos/static/js/pos-utils.js" defer></script> <script src="/pos/static/js/pos-utils.js" defer></script>
<script src="/pos/static/js/sidebar.js" defer></script> <script src="/pos/static/js/sidebar.js" defer></script>
<script src="/pos/static/js/kiosk.js" defer></script> <script src="/pos/static/js/kiosk.js" defer></script>
<script src="/pos/static/js/config.js" defer></script> <script src="/pos/static/js/config.js?v=2" defer></script>
<script src="/pos/static/js/sync-engine.js" defer></script> <script src="/pos/static/js/sync-engine.js" defer></script>
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script> <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
<script src="/pos/static/js/pwa-install.js" defer></script> <script src="/pos/static/js/pwa-install.js" defer></script>