From f5378524695124af8e693f4799a26bf4868309b9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 12 Sep 2025 18:20:17 +0300
Subject: [PATCH] fix(ribbon): book properties overlapping

---
 .../ribbon/CollectionPropertiesTab.tsx        |  4 ++--
 apps/client/src/widgets/ribbon/style.css      | 21 +++++++------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
index c58bbc02b..6180b2321 100644
--- a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
@@ -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>
+    </>
   )
 }
 
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 02438d4e3..0dc3f4ffe 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -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;