fix: responsivness for contacts details

Signed-off-by: Hamza Mahjoubi <[email protected]>
nextcloud · Jul 23, 2024 · 71d3bc9 · 71d3bc9
1 parent 4096c68
commit 71d3bc9
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 23 deletions.
diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
@@ -371,9 +371,13 @@ export default {
 	max-width: 800px;
 	margin: auto;
 	margin-bottom: 36px;
+	@media screen and (max-width: 1024px) {
+		padding: 0 20px;
+
+	}
 
 	&:deep(.contact-header__avatar) {
-		width: 75px;
+		width: 75px !important;
 	}
 
 	&:deep(.contact-header__no-wrap) {

diff --git a/src/components/DetailsHeader.vue b/src/components/DetailsHeader.vue
@@ -84,19 +84,15 @@ $top-padding: 50px;
 	@media (max-width: 1024px) {
 		// Top padding of 44px is already included in AppContent by default on mobile
 		padding-top: calc($top-padding - 44px);
-
-		// Wrap actions on mobile
-		flex-wrap: wrap;
 		&__no-wrap {
 			width: 100%;
 		}
-		&__infos {
-			// Account for nonexistent actions menu
-			width: calc($contact-details-value-max-width + $contact-details-row-gap + 44px) !important;
-		}
 		&__actions .header-menu {
 			margin-left: auto;
 		}
+		&__avatar {
+			width: 150px !important;
+		}
 	}
 
 	&__no-wrap {

diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
@@ -178,11 +178,4 @@ export default {
 		}
 	}
 }
-
-// Mobile tweaks
-@media (max-width: 600px) {
-	.property__value {
-		width: 125px;
-	}
-}
 </style>
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
@@ -213,10 +213,4 @@ export default {
 	}
 }
 
-// Mobile tweaks
-@media (max-width: 600px) {
-	.property__value {
-		width: 125px;
-	}
-}
 </style>
diff --git a/src/css/Properties/Properties.scss b/src/css/Properties/Properties.scss
@@ -41,7 +41,10 @@ $property-row-gap: $contact-details-row-gap;
 		justify-content: flex-end;
 		width: $contact-details-label-max-width;
 		min-width: 0; // Has to be zero unless we implement wrapping
-
+		@media screen and (max-width: 1024px) {
+			width: fit-content;
+
+		}
 		// Text label styling
 		> :not(.multiselect):not(.material-design-icon) {
 			overflow: hidden;
@@ -128,4 +131,4 @@ $property-row-gap: $contact-details-row-gap;
 		z-index: 10;
 		width: 44px;
 	}
-}
+}
diff --git a/src/css/contacts.scss b/src/css/contacts.scss
@@ -28,6 +28,7 @@ $grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
 	// Compensate top padding reserved for the back button on mobile
 	@media (max-width: 1024px) {
 		height: calc(100% - 44px);
+		padding: 0 20px;
 	}
 }