fix: preserve line numbers in contracts (#332)

# 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:
#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

@@ -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>

packages/app/tailwind.config.js

@@ -48,6 +48,9 @@ module.exports = {
             maxWidth: "1240px",
           },
         },
+        ".text-nowrap": {
+          textWrap: "nowrap",
+        },
       });
     },
   ],