Fix padding and background in ByteCodeValue and DisassembledCodeValue.

Signed-off-by: Simon Viénot <[email protected]>
hashgraph · Jan 5, 2024 · 60f0bd2 · 60f0bd2
1 parent 6761e85
commit 60f0bd2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 30 deletions.
diff --git a/src/assets/styles/explorer.scss b/src/assets/styles/explorer.scss
@@ -393,6 +393,13 @@ hr.dotted {
 .h-dotted-area {
   border: dashed 1px $h-highlight-color;
 }
+/* Code box (source, bytecode, assembly code) */
+.h-code-box {
+  border: 0.5px solid dimgrey;
+  gap: 0.42rem;
+  overflow-y: auto;
+  min-height: 5rem
+}
 
 //
 // MODALS

diff --git a/src/components/contract/ContractByteCodeSection.vue b/src/components/contract/ContractByteCodeSection.vue
@@ -81,12 +81,12 @@
                     <StringValue :string-value="solcVersion ?? undefined"/>
                 </template>
             </Property>
-            <div class="columns is-multiline h-is-property-text">
-                <div id="bytecode" class="column is-6" :class="{'is-full': !isSmallScreen}">
+            <div class="columns is-multiline h-is-property-text pt-3">
+                <div id="bytecode" class="column is-6 pt-0" :class="{'is-full': !isSmallScreen}">
                     <p class="has-text-weight-light">Runtime Bytecode</p>
                     <ByteCodeValue :byte-code="byteCode ?? undefined" class="mt-3 mb-4"/>
                 </div>
-                <div id="assembly-code" class="column is-6" :class="{'h-has-column-separator':isSmallScreen}">
+                <div id="assembly-code" class="column is-6 pt-0" :class="{'h-has-column-separator':isSmallScreen}">
                     <div class="is-flex is-align-items-center is-justify-content-space-between">
                         <p class="has-text-weight-light">Assembly Bytecode</p>
                         <div class="is-flex is-align-items-center is-justify-content-end">

diff --git a/src/components/values/ByteCodeValue.vue b/src/components/values/ByteCodeValue.vue
@@ -25,7 +25,8 @@
 <template>
 
     <div v-if="textValue" id="bytecode"
-         class="pl-1 mt-2 mr-1 code-data-box">
+         class="h-code-box h-has-page-background pt-1 pl-3 pr-2 pb-2 mt-2 mr-1"
+         style="max-height: 400px;">
         <HexaValue :byte-string="textValue" :copyable="false"/>
     </div>
 
@@ -69,14 +70,4 @@ export default defineComponent({
 <!--                                                       STYLE                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<style>
-
-.code-data-box {
-    border: 0.5px solid dimgrey;
-    gap: 0.42rem;
-    max-height: 20rem;
-    overflow-y: auto;
-    min-height: 5rem
-}
-
-</style>
+<style/>
diff --git a/src/components/values/DisassembledCodeValue.vue b/src/components/values/DisassembledCodeValue.vue
@@ -23,8 +23,10 @@
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
 <template>
-    <div v-if="disassembly" id="disassembly" class="mt-2 p-2 is-flex analyzed-data-box">
-        <div v-for="opcode in disassembly" v-if="disassembly && disassembly.length > 0" :key="opcode.index16">
+    <div v-if="disassembly" id="disassembly"
+         class="h-code-box h-has-page-background is-family-monospace mt-2 px-3 py-1"
+         style="max-height: 400px;">
+    <div v-for="opcode in disassembly" v-if="disassembly && disassembly.length > 0" :key="opcode.index16">
             <OpcodeValue :opcode="opcode" :show-hexa-opcode="showHexaOpcode"/>
         </div>
         <p v-else class="has-text-grey is-italic has-text-weight-medium">{{ disassembledError }}</p>
@@ -92,16 +94,4 @@ export default defineComponent({
 <!--                                                       STYLE                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
-<style>
-
-.analyzed-data-box {
-    border: 0.5px solid dimgrey;
-    gap: 0.42rem;
-    flex-direction: column;
-    max-height: 20rem;
-    overflow-y: auto;
-    font-family: novamonoregular, monospace;
-    min-height: 5rem
-}
-
-</style>
+<style/>