object settings tips

src/app.css

@@ -65,7 +65,7 @@ button.settings, button.delete, button.add, button.less, button.close, button.mo
   background-size: 32px;
   background-repeat: no-repeat;
   background-position: center;
-  cursor: pointer;
+  vertical-align: middle;
 }
 button.settings { background-image: url(./assets/change.png); }
 button.delete { background-image: url(./assets/delete.png); }
@@ -74,6 +74,12 @@ button.less { background-image: url(./assets/less.png); }
 button.close { background-image: url(./assets/close.png); }
 button.move { background-image: url(./assets/move.png); }
 
+button.small {
+  width: 24px;
+  height: 24px;
+  background-size: 24px;
+}
+
 .tip {
   width: calc(100% - 4em);
   margin-left: -1em;

src/components/ObjectSettings.vue

@@ -1,5 +1,10 @@
 <template>
   <div id="object-settings">
+    <Tips>
+      <li>You can use the scrollwheel together with the ALT key to resize a planet.</li>
+      <li>Drag the <button class="move small" /> button to rearrange satellites.</li>
+      <li>Only moons can have a size, station sizes are static.</li>
+    </Tips>
     <section class="main">
       <div>
         <input type="text" class="big"
@@ -42,6 +47,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import Tips from './Tips.vue'
 import SatelliteSettings from './SatelliteSettings.vue'
 
 import {