From 71d3bc972b102e43fde5495420928eaf68d04e11 Mon Sep 17 00:00:00 2001
From: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
Date: Tue, 23 Jul 2024 13:49:37 +0200
Subject: [PATCH] fix: responsivness for contacts details

Signed-off-by: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
---
 src/components/CircleDetails.vue                   |  6 +++++-
 src/components/DetailsHeader.vue                   | 10 +++-------
 src/components/Properties/PropertyMultipleText.vue |  7 -------
 src/components/Properties/PropertyText.vue         |  6 ------
 src/css/Properties/Properties.scss                 |  7 +++++--
 src/css/contacts.scss                              |  1 +
 6 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index a5ed6d5b6..b5acfeb92 100644
--- 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
index 541049030..2bde95fdd 100644
--- 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
index 7de279d19..3bbc526de 100644
--- 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
index 99c6c9433..4f9a18fd2 100644
--- 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
index ffb409cfd..6973d427e 100644
--- 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;
 	}
-}
+}
\ No newline at end of file
diff --git a/src/css/contacts.scss b/src/css/contacts.scss
index 327239f70..6b2cf17bf 100644
--- 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;
 	}
 }