Improve the properties panel

src/components/AppLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
 import PrimitivesSidebar from './PrimitivesSidebar.vue'
+import PropertiesPanel from './PropertiesPanel.vue'
 
 const STORAGE_KEY = 'rapidmodel-sidebar-state'
 
@@ -63,9 +64,9 @@ onMounted(() => {
         <slot name="left-sidebar" />
       </PrimitivesSidebar>
 
-      <aside class="right-sidebar">
+      <PropertiesPanel class="properties-panel">
-        <slot name="right-sidebar" />
+        <slot name="properties-panel" />
-      </aside>
+      </PropertiesPanel>
     </div>
 
     <footer class="status-bar">
@@ -119,18 +120,6 @@ onMounted(() => {
   overflow: visible;
 }
 
-.right-sidebar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: var(--sidebar-width);
-  background: rgba(30, 30, 46, 0.85);
-  border-left: 1px solid var(--color-border);
-  overflow-y: auto;
-  z-index: 1;
-}
-
 .status-bar {
   flex-shrink: 0;
   height: var(--status-bar-height);
@@ -152,7 +141,7 @@ onMounted(() => {
 
 @media (max-width: 600px) {
   .left-sidebar,
-  .right-sidebar {
+  .properties-panel {
     display: none;
   }
 }

src/components/PropertiesPanel.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <aside class="properties-panel">
+    <div class="content">
+      <slot />
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.properties-panel {
+  position: absolute;
+  top: var(--space-md);
+  right: var(--space-md);
+  bottom: var(--space-md);
+  width: var(--sidebar-width);
+  background: rgba(30, 30, 46, 0.85);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-sm);
+}
+</style>