chore(front): spacings, gaps, paddings

front/src/components/library/Library.vue

@@ -6,7 +6,7 @@
 
 <style scoped lang="scss">
 main {
-  padding: 32px 48px;
+  padding: 32px;
 }
 
 </style>

front/src/ui/components/Sidebar.vue

@@ -47,7 +47,7 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
         </i>
       </Link>
 
-      <Layout nav gap-4 flex style="align-items: center;">
+      <Layout nav gap-8 flex style="align-items: center;">
         <Link
           v-if="store.state.auth.availablePermissions['settings'] || store.state.auth.availablePermissions['moderation']"
           to="/manage/settings"
@@ -218,7 +218,6 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
       button.button {
         height: 40px;
         padding: 10px;
-        margin-left: 4px;
       }
 
       .menu {
@@ -227,7 +226,6 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
         padding: 8px !important;
         height: 40px;
         width: 40px !important;
-        margin-left: 4px;
 
         i {
           font-size: 24px !important;

front/src/ui/components/UserMenu.vue

@@ -158,7 +158,6 @@ const labels = computed(() => ({
 <style scoped lang="scss">
 header > nav button.button {
   padding: 10px;
-  margin-left: 4px;
 
   &:has(img) {
     padding: 4px;

front/src/ui/layouts/constrained.vue

@@ -8,7 +8,7 @@
 
 <style scoped lang="scss">
 main {
-  padding: 32px 48px;
+  padding: 32px;
 }
 
 </style>

front/ui-docs/components/ui/layout/section.md

@@ -154,7 +154,7 @@ You can add props to the Link or Button, for example to make them `primary` or a
     h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 ```
 
-<Spacer size="40"/>
+<Spacer :size="40"/>
 
 <Section solid primary icon="bi-star"
     h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />