Abdelaziz/sultan
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix crooked action-cell rows after progress button

Browse Source 
The actions cell was a no-wrap flex container, so the new
"💬 Прогресс" button overflowed sideways and bent the table
lines. Allow wrap, shrink button to icon + count badge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
sultan 2026-05-25 09:24:40 +05:00
parent a20600138e
commit 2933fe6ccf
3 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@ -289,7 +289,7 @@ function renderTable(tasks) {
<td class="actions-cell"> <td class="actions-cell">
${st !== 'done' && t.status === 'new' ? `<button class="btn btn-sm btn-primary" data-act="start" data-id="${t.id}">▶ В работу</button>` : ''} ${st !== 'done' && t.status === 'new' ? `<button class="btn btn-sm btn-primary" data-act="start" data-id="${t.id}">▶ В работу</button>` : ''}
${st !== 'done' ? `<button class="btn btn-sm btn-success" data-act="done" data-id="${t.id}">✓ Готово</button>` : `<button class="btn btn-sm btn-ghost" data-act="reopen" data-id="${t.id}">↺ Вернуть</button>`} ${st !== 'done' ? `<button class="btn btn-sm btn-success" data-act="done" data-id="${t.id}">✓ Готово</button>` : `<button class="btn btn-sm btn-ghost" data-act="reopen" data-id="${t.id}">↺ Вернуть</button>`}
<button class="btn btn-sm btn-ghost" data-act="progress" data-id="${t.id}" title="Промежуточный результат">💬 Прогресс${(t.updates && t.updates.length) ? ` <span class="upd-count">${t.updates.length}</span>` : ''}</button> <button class="btn btn-sm btn-icon btn-ghost" data-act="progress" data-id="${t.id}" title="Промежуточные результаты">💬${(t.updates && t.updates.length) ? `<span class="upd-count">${t.updates.length}</span>` : ''}</button>
<button class="btn btn-sm btn-icon btn-danger" data-act="delete" data-id="${t.id}" title="Удалить">✕</button> <button class="btn btn-sm btn-icon btn-danger" data-act="delete" data-id="${t.id}" title="Удалить">✕</button>
</td> </td>
`; `;

4
index.html
View File

@ -11,7 +11,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
<link rel="stylesheet" href="styles.css?v=34" /> <link rel="stylesheet" href="styles.css?v=35" />
</head> </head>
<body> <body>
<header class="topbar"> <header class="topbar">
@ -315,6 +315,6 @@
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/l10n/ru.js"></script> <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/l10n/ru.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="app.js?v=31"></script> <script src="app.js?v=32"></script>
</body> </body>
</html> </html>

5
styles.css
View File

@ -456,7 +456,8 @@ body:not([data-role]) .employee-only { display: none !important; }
padding: 1px 6px; padding: 1px 6px;
border-radius: var(--r-pill); border-radius: var(--r-pill);
margin-left: 4px; margin-left: 4px;
vertical-align: 1px; vertical-align: 2px;
line-height: 1;
} }
.who label { color: var(--muted); font-size: 12px; font-weight: 400; } .who label { color: var(--muted); font-size: 12px; font-weight: 400; }
.who select { .who select {
@ -764,7 +765,7 @@ td.title { max-width: 380px; }
.badge.status-done { background: rgba(52, 199, 89, 0.14); color: var(--ok); } .badge.status-done { background: rgba(52, 199, 89, 0.14); color: var(--ok); }
.badge.status-overdue { background: rgba(255, 59, 48, 0.12); color: var(--danger); } .badge.status-overdue { background: rgba(255, 59, 48, 0.12); color: var(--danger); }
td.actions-cell { white-space: nowrap; display: flex; gap: 8px; flex-wrap: nowrap; } td.actions-cell { white-space: nowrap; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.prio-select { .prio-select {
padding: 5px 24px 5px 10px; padding: 5px 24px 5px 10px;