Fix positionning and cleanup css

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

6 files changed, 4 insertions, 41 deletions

diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 7ccdd7af..f49f76cf 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/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;
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue
index 4c84dff1..779f84cf 100644
--- a/src/components/AppContent/ContactsContent.vue
+++ b/src/components/AppContent/ContactsContent.vue
@@ -151,9 +151,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-#app-content-wrapper {
-	display: flex;
-}
-</style>
diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index d0680e72..664c1c53 100644
--- a/src/components/CircleDetails.vue
+++ b/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;
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index c6372987..61053a2b 100644
--- a/src/components/ContactsList.vue
+++ b/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%;
diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue
index 5b05bd33..888ed668 100644
--- a/src/components/EntityPicker/EntityPicker.vue
+++ b/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
diff --git a/src/components/MemberList.vue b/src/components/MemberList.vue
index 032b7bab..5336f8bc 100644
--- a/src/components/MemberList.vue
+++ b/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%;