Fix positionning and cleanup css

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

css/contacts.scss

@@ -25,6 +25,7 @@ $grid-height-unit: 40px;
 $grid-input-padding: 7px;
 $grid-input-margin: 3px;
 $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
+$list-width: 300px;
 
 // components
 @import 'SettingsSection';
@@ -38,3 +39,27 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
 // various
 @import 'animations';
 @import 'icons';
+
+
+// global design overrides
+#app-content-wrapper {
+	display: flex;
+}
+
+.app-content-details {
+	// Starts shrinking at the same width as the list
+	flex: 1 1 $list-width;
+	min-width: 0;
+	padding: 0 80px 80px 80px;
+}
+
+.app-content-list {
+	flex: 1 1 $list-width;
+	// Cancel scrolling
+	overflow: visible;
+
+	// Make sure we don't show extra margins
+	.empty-content {
+		padding: 20px;
+	}
+}

src/components/AppContent/CircleContent.vue

@@ -173,10 +173,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#app-content-wrapper {
-	display: flex;
-}
-
 // TODO: replace my button component when available
 button {
 	height: 44px;

src/components/AppContent/ContactsContent.vue

@@ -151,9 +151,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-#app-content-wrapper {
-	display: flex;
-}
-</style>

src/components/CircleDetails.vue

@@ -211,12 +211,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-content-details {
-	flex: 1 1 100%;
-	min-width: 0;
-	padding: 0 80px 80px 80px;
-}
-
 .circle-details-section {
 	&:not(:first-of-type) {
 		margin-top: 24px;

src/components/ContactsList.vue

@@ -152,16 +152,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-content-list {
-	flex: 1 1 300px;
-	// Cancel scrolling
-	overflow: visible;
-
-	.empty-content {
-		padding: 20px;
-	}
-}
-
 // Make virtual scroller scrollable
 .contacts-list {
 	max-height: 100%;

src/components/EntityPicker/EntityPicker.vue

@@ -57,7 +57,7 @@
 				</transition-group>
 
 				<!-- No recommendations -->
-				<EmptyContent v-else-if="dataSet.length === 0" icon="icon-search">
+				<EmptyContent v-if="dataSet.length === 0" icon="icon-search">
 					{{ t('contacts', 'Search for people to add') }}
 				</EmptyContent>
 
@@ -384,7 +384,6 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	justify-content: space-between;
 	/** This next 2 rules are pretty hacky, with the modal component somehow
 	the margin applied to the content is added to the total modal width,
 	so here we subtract it to the width and height of the content.
@@ -418,9 +417,9 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
 		display: flex;
 		overflow-y: auto;
 		align-content: flex-start;
-		justify-content: flex-start;
 		flex: 1 0 auto;
 		flex-wrap: wrap;
+		justify-content: flex-start;
 		// half a line height to know there is more lines
 		max-height: 6.5em;
 		padding: $entity-spacing 0;
@@ -457,8 +456,8 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
 }
 
 // Properly center Entity Picker empty content
-.empty-content {
-	margin: 0;
+::v-deep .empty-content {
+	margin: auto 0 !important;
 }
 
 /** Size full in the modal component doesn't have border radius, this adds

src/components/MemberList.vue

@@ -254,16 +254,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-content-list {
-	flex: 1 1 300px;
-	// Cancel scrolling
-	overflow: visible;
-
-	.empty-content {
-		padding: 20px;
-	}
-}
-
 .members-list {
 	// Make virtual scroller scrollable
 	max-height: 100%;