🎨

src/client/app/desktop/views/components/home.vue

@@ -38,7 +38,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="main">
+	<div class="main" :class="{ side: widgets.left.length == 0 || widgets.right.length == 0 }">
 		<template v-if="customize">
 			<x-draggable v-for="place in ['left', 'right']"
 				:list="widgets[place]"
@@ -359,12 +359,10 @@ export default Vue.extend({
 				box-shadow var(--shadow)
 				border-radius var(--round)
 
-			@media (max-width 700px)
+		&.side
-				padding 0
+			> .main
-
+				width calc(100% - 280px)
-				> .tl
+				max-width 680px
-					border none
-					border-radius 0
 
 		> *:not(.main)
 			width 280px
@@ -381,14 +379,24 @@ export default Vue.extend({
 			padding-right 16px
 			order 3
 
-		@media (max-width 1100px)
+		&.side
-			> *:not(.main)
+			@media (max-width 1000px)
-				display none
+				> *:not(.main)
+					display none
 
-			> .main
+				> .main
-				float none
+					width 100%
-				width 100%
+					max-width 700px
-				max-width 700px
+					margin 0 auto
-				margin 0 auto
+
+		&:not(.side)
+			@media (max-width 1200px)
+				> *:not(.main)
+					display none
+
+				> .main
+					width 100%
+					max-width 700px
+					margin 0 auto
 
 </style>

src/client/app/desktop/views/components/ui.vue

@@ -96,14 +96,10 @@ export default Vue.extend({
 		background-attachment fixed
 		opacity 0.3
 
-	> .header
-		@media (max-width 1000px)
-			display none
-
 	> .content.sidebar.left
-		padding-left 64px
+		padding-left 68px
 
 	> .content.sidebar.right
-		padding-right 64px
+		padding-right 68px
 
 </style>