chore(docs): update interaction example styles

docs/examples/interaction/InteractionControls.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useVueFlow } from '@vue-flow/core'
+import { Panel, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const {
@@ -42,7 +42,7 @@ onMoveEnd((flowTransform) => console.log('move end', flowTransform))
 </script>
 
 <template>
-  <div class="controls">
+  <Panel position="top-right">
     <div>
       <label class="label" for="draggable">
         nodesDraggable
@@ -113,5 +113,5 @@ onMoveEnd((flowTransform) => console.log('move end', flowTransform))
         <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
       </label>
     </div>
-  </div>
+  </Panel>
 </template>

docs/examples/interaction/style.css

@@ -1,15 +1,18 @@
-.interactionflow .controls {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 4;
-  font-size: 11px;
-  background-color: lightgray;
-  border-bottom-right-radius: 10px;
-  padding: 8px;
+.vue-flow__panel {
+  background-color: #2d3748;
+  padding: 10px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12px;
+  font-weight: 600;
 }
 
-.interactionflow .controls .label {
+
+.vue-flow__panel .label {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -17,6 +20,6 @@
   cursor: pointer;
 }
 
-.interactionflow .controls .label input {
+.vue-flow__panel .label input {
   cursor: pointer;
 }

docs/examples/save-restore/style.css

@@ -29,3 +29,8 @@
   background-color: #2563eb;
   transition: background-color 0.2s;
 }
+
+.vue-flow__panel button svg {
+  width: 100%;
+  height: 100%;
+}