style: improve nano methods style for many available methods (#693)

HathorNetwork · Nov 12, 2024 · a691738 · a691738
1 parent 687ea3d
commit a691738
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/index.module.scss b/src/index.module.scss
@@ -898,6 +898,7 @@ span.software {
 .nc-detail-wrapper {
   padding: 1rem;
   border: 1px solid;
+  max-width: 100%;
 }
 
 .nc-detail-wrapper > hr {
@@ -906,6 +907,19 @@ span.software {
   border-top: 1px solid;
 }
 
+.five-column-list {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 1rem;
+  list-style: none;
+  padding-left: 0;
+}
+
+.five-column-list li {
+  padding: 0.5rem;
+  text-align: center;
+}
+
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {

diff --git a/src/screens/nano-contract/NanoContractDetail.js b/src/screens/nano-contract/NanoContractDetail.js
@@ -239,9 +239,9 @@ function NanoContractDetail() {
       method !== hathorLib.constants.NANO_CONTRACTS_INITIALIZE_METHOD
     ).map((method) => {
       return (
-        <div key={method}>
+        <li key={method}>
           <a href="true" onClick={(e) => executeMethod(e, method)}>{method}</a>
-        </div>
+        </li>
       );
     });
   }
@@ -262,9 +262,9 @@ function NanoContractDetail() {
         <hr />
         <div>
           <p className="text-center mb-4"><strong>Available methods:</strong></p>
-          <div className="d-flex flex-row justify-content-around mt-3">
+          <ul className="five-column-list mt-3">
             {renderNanoMethods()}
-          </div>
+          </ul>
         </div>
       </div>
     );