fix(ribbon): book properties overlapping

This commit is contained in:
Elian Doran
2025-09-12 18:20:17 +03:00
parent ff422d112b
commit f537852469
2 changed files with 10 additions and 15 deletions

View File

@@ -56,7 +56,7 @@ function CollectionTypeSwitcher({ viewType, setViewType }: { viewType: string, s
function BookProperties({ viewType, note, properties }: { viewType: ViewTypeOptions, note: FNote, properties: BookProperty[] }) {
return (
<div className="book-properties-container">
<>
{properties.map(property => (
<div className={`type-${property}`}>
{mapPropertyView({ note, property })}
@@ -72,7 +72,7 @@ function BookProperties({ viewType, note, properties }: { viewType: ViewTypeOpti
}}
/>
)}
</div>
</>
)
}

View File

@@ -336,31 +336,26 @@
.book-properties-widget {
padding: 12px 12px 6px 12px;
display: flex;
}
.book-properties-widget > * {
margin-right: 15px;
}
.book-properties-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
overflow: hidden;
align-items: center;
}
.book-properties-container > div {
margin-right: 15px;
.book-properties-widget > * {
flex-shrink: 0;
}
.book-properties-container > .type-number > label {
.book-properties-widget > .type-number > label {
display: flex;
align-items: baseline;
}
.book-properties-container input[type="checkbox"] {
.book-properties-widget input[type="checkbox"] {
margin-right: 5px;
}
.book-properties-container label {
.book-properties-widget label {
display: flex;
justify-content: center;
align-items: center;