Fix actions column layout: display:flex on a <td> broke the table
display: flex on td.actions-col was fighting the table's own column-width calculation -- a ~55px gap opened up between the actions column and Date, and the buttons rendered outside their cell's actual boundary. Buttons go back to sitting inline (already inline-flex individually) inside a plain table-cell, spaced with a margin on the first one instead of a flex gap on the container. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -202,14 +202,13 @@ html.gin--dark-mode #figli-home-app {
|
||||
#figli-home-app th.actions-col {
|
||||
width: 1%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#figli-home-app td.actions-col {
|
||||
display: flex;
|
||||
gap: 0.15rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Buttons stay inline (not flex) inside the <td> -- display: flex on a
|
||||
table cell breaks the table's own column-width calculation (observed:
|
||||
a ~55px gap opening up between this column and the next, and the
|
||||
buttons rendering outside their cell's actual boundary). */
|
||||
#figli-home-app .figli-edit-btn,
|
||||
#figli-home-app .figli-link-btn {
|
||||
display: inline-flex;
|
||||
@@ -223,6 +222,11 @@ html.gin--dark-mode #figli-home-app {
|
||||
border-radius: 4px;
|
||||
color: var(--figli-text-light);
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#figli-home-app .figli-link-btn {
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
|
||||
#figli-home-app .figli-edit-btn:hover,
|
||||
|
||||
Reference in New Issue
Block a user