FIX: hide color palette

index.html

@@ -23,8 +23,11 @@
         <button id="btn-delete">Usuń</button>
         <button id="btn-copy">Kopiuj</button>
         <button id="btn-paste">Wklej</button>
-        <button id="btn-connect">Połącz</button>       <!-- DODANE -->
+        <button id="btn-connect">Połącz</button>
+        <div class="color-wrapper"><!-- DODANE -->
         <button id="btn-change-color">Kolor</button>   <!-- DODANE -->
+            <div id="color-palette" style="position:absolute; display:none; padding:8px; background:#fff; border:1px solid #ccc; border-radius:6px; gap:6px; z-index:2000;"></div>
+        </div>
         </div>
     <p>Zoom</p>
     <div class="zoom-wrapper toolbar-wrapper">
@@ -39,7 +42,7 @@
 </div>
 
 <!-- DODANY KONTAINER DLA PALETY KOLORÓW -->
-<div id="color-palette" style="position:absolute; display:none; padding:8px; background:#fff; border:1px solid #ccc; border-radius:6px; gap:6px; z-index:2000;"></div>
+
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
@@ -73,7 +76,7 @@
 
         const paletteColors = ['#FF4B4B','#FFA500','#FFD700','#4CAF50','#00BCD4','#2196F3','#9C27B0','#795548','#000000'];
         const $palette = $('#color-palette');
-        $palette.css({ display:'grid', gridTemplateColumns:'repeat(3,28px)' });
+        $palette.css({ gridTemplateColumns:'repeat(3,28px)' });
 
         paletteColors.forEach(c => {
             // ZMIANA TUTAJ: Dodajemy width, height, border i cursor
@@ -101,11 +104,12 @@
         });
 
         $('#btn-change-color').on('click', function() {
-            const off = $(this).offset();
-            $palette.css({ top: off.top + 36, left: off.left }).toggle();
+            $palette.toggleClass('active');
         });
         $(document).on('click', function(e) {
-            if (!$(e.target).closest('#color-palette,#btn-change-color').length) $palette.hide();
+            if (!$(e.target).closest('#color-palette,#btn-change-color').length)
+                if($palette.hasClass('active'))
+                    $palette.toggleClass('active');
         });
 
 

style.css

@@ -262,3 +262,17 @@ body {
         top: auto;
     }
 }
+
+/* color wrapper */
+.color-wrapper{
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+#color-palette{
+    display:none;
+    top: 41px;
+}
+#color-palette.active{
+    display: grid!important;
+}