fix mobile alignment issues (MystenLabs#3601)

* fix mobile alignment issues * fix alignment issue * lint fix * update font size for label
ngerald51 · Jul 29, 2022 · 48ec25e · 48ec25e
1 parent b5616f7
commit 48ec25e
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/explorer/client/src/pages/transaction-result/TransactionResult.module.css b/explorer/client/src/pages/transaction-result/TransactionResult.module.css
@@ -29,6 +29,10 @@
     @apply text-sui-grey-100 font-[500] text-lg  mt-5 mb-0;
 }
 
+.itemviewcontentlabel {
+    @apply text-sm;
+}
+
 .itemviewtitle {
     border-bottom: 1px solid #f0f1f2;
     @apply border-b-[1px] border-[#f0f1f2] pb-1 pt-1;
@@ -41,14 +45,15 @@
 }
 
 .itemviewcontent .itemviewcontentitem {
-    @apply grid gap-1 text-[14px] md:text-[15px] text-gray-500;
+    @apply grid gap-1 text-[14px] md:text-[15px] text-gray-500 py-2;
 
     grid-template-columns: 1fr 3fr;
 }
 
 .itemviewcontentvalue {
-    @apply text-sm pt-2 pb-2 text-gray-800 contents md:block;
+    @apply text-sm  text-gray-800 inline-flex content-center items-baseline md:block;
 
+    line-break: anywhere;
     box-sizing: border-box;
 }
 
@@ -57,10 +62,6 @@
     @apply break-all font-mono text-sm text-sui-dark;
 }
 
-.itemviewcontentlabel {
-    @apply pt-2 pb-2;
-}
-
 @media (min-width: 40em) {
     .itemviewcontent .itemviewcontentitem {
         grid-template-columns: 1fr 5fr;