From 0b1a667f13fb4397c2fe78e401a77d4a0842e57c Mon Sep 17 00:00:00 2001
From: Nikola Pavlov <144679078+tx-nikola@users.noreply.github.com>
Date: Fri, 6 Dec 2024 10:46:34 +0100
Subject: [PATCH] fix: preserve line numbers in contracts (#332)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# What ❔
This PR preserves the lines and line numbers in contract view, so that
the code lines don't break into the next line on smaller screens.
When the screen is smaller, the lines are horizontally scrollable.
<!-- What are the changes this PR brings about? -->
<!-- Example: This PR adds a PR template to the repo. -->
<!-- (For bigger PRs adding more context is appreciated) -->

## Why ❔
PR ensures that the line number always corresponds to the correct line.
Previously, on smaller screens, lines would break to the next line,
causing a mismatch between lines and line numbers.

This is a fix for this issue:
https://github.com/matter-labs/block-explorer/issues/327
<!-- Why are these changes done? What goal do they contribute to? What
are the principles behind them? -->
<!-- Example: PR templates ensure PR reviewers, observers, and future
iterators are in context about the evolution of repos. -->

## Checklist

<!-- Check your PR fulfills the following items. -->
<!-- For draft PRs check the boxes as you complete them. -->

- [x] PR title corresponds to the body of PR (we generate changelog
entries from PRs).
- [x] Tests for the changes have been added / updated.
- [x] Documentation comments have been added / updated.
---
 packages/app/src/components/SolidityEditor.vue | 8 ++++++++
 packages/app/tailwind.config.js                | 3 +++
 2 files changed, 11 insertions(+)

diff --git a/packages/app/src/components/SolidityEditor.vue b/packages/app/src/components/SolidityEditor.vue
index 538aa35966..52ad41f04a 100644
--- a/packages/app/src/components/SolidityEditor.vue
+++ b/packages/app/src/components/SolidityEditor.vue
@@ -116,6 +116,14 @@ function focusEditor() {
     .prism-editor__line-numbers {
       @apply h-max;
     }
+
+    .prism-editor__container {
+      @apply overflow-x-scroll;
+    }
+
+    .prism-editor__editor {
+      @apply text-nowrap;
+    }
   }
 }
 </style>
diff --git a/packages/app/tailwind.config.js b/packages/app/tailwind.config.js
index 28d9ad07bb..7047b87827 100644
--- a/packages/app/tailwind.config.js
+++ b/packages/app/tailwind.config.js
@@ -48,6 +48,9 @@ module.exports = {
             maxWidth: "1240px",
           },
         },
+        ".text-nowrap": {
+          textWrap: "nowrap",
+        },
       });
     },
   ],