update design

src/App.vue

@@ -116,7 +116,9 @@ const rotatePage = () => {
             Повернуть
           </Button>
         </ButtonsBar>
+        <ButtonsBar>
           <Button :click="savePng">Сохранить как png</Button>
+        </ButtonsBar>
       </SidebarBlock>
     </Sidebar>
   </div>

src/components/Button.vue

@@ -31,6 +31,7 @@ withDefaults(defineProps<Props>(), {
   color: #22333B;
   background-color: #EAE0D5;
   border: 1px solid #5E503F;
+  width: 100%;
 }
 
 .button:hover {
@@ -42,5 +43,6 @@ withDefaults(defineProps<Props>(), {
   margin: 3px;
   padding: 2px 10px;
   font-size: 10pt;
+  width: auto;
 }
 </style>

src/components/ButtonsBar.vue

@@ -6,6 +6,6 @@
 
 <style scoped>
 .buttons-bar {
-  padding: 0 0 20px 5px;
+  padding: 15px 0 0 0;
 }
 </style>

src/components/Input.vue

@@ -28,7 +28,7 @@ const modelValue = defineModel();
 
 <style scoped>
 .input-container {
-  margin: 10px;
+  margin: 10px 0 0 0;
 }
 
 input {
@@ -36,7 +36,7 @@ input {
 }
 
 .input {
-  margin: 10px 0;
+  margin: 10px 0 0 0;
   border: 1px solid #c6ac8f;
   padding: 10px;
   border-radius: 10px;

src/components/SidebarBlock.vue

@@ -15,7 +15,7 @@ defineProps<{
 .sidebar-block {
   border: 1px solid #c6ac8f;
   border-radius: 10px;
-  margin: 0 0 30px 0;
+  margin: 0 0 10px 0;
   padding: 20px;
   background-color: white;
 }