fix(inscription): overflow

Magickbase · Sep 5, 2024 · f81df70 · f81df70
1 parent 3ff881e
commit f81df70
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/pages/Address/Inscription.tsx b/src/pages/Address/Inscription.tsx
@@ -24,7 +24,7 @@ const Inscription = ({
         {Object.entries(content).map(([key, value]) => (
           <div className={classNames('monospace', styles.jsonValue)}>
             <div className={classNames('monospace', styles.title)}>{key}:</div>
-            <div className="monospace">{value}</div>
+            <div className={classNames('monospace', styles.value)}>{value}</div>
           </div>
         ))}
         {'}'}

diff --git a/src/pages/Address/inscription.module.scss b/src/pages/Address/inscription.module.scss
@@ -24,13 +24,24 @@
   }
 
   .content {
+    height: 90px;
+    overflow-y: scroll;
     padding: 8px;
     background-color: #000;
     width: 100%;
     color: #fff;
+    text-wrap: nowrap;
 
     .jsonValue {
-      margin-left: 2em;
+      .value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex-grow: 1;
+      }
+
+      padding-left: 2em;
+      width: 100%;
+      overflow: hidden;
       max-width: 100%;
       display: flex;
     }