No word wrap in preview on Import Page #227

TheAxelander · Mar 17, 2024 · 8f9a4fc · 8f9a4fc
1 parent a9f77ee
commit 8f9a4fc
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 1.9 (2024-xx-xx)
+
+### :gear: Features & Enhancements
+
+* File content preview on Import Page no longer wraps, instead it uses horizontal scrolling [#227](https://github.com/TheAxelander/OpenBudgeteer/issues/227)
+
 ## 1.8.1 (2024-03-17)
 
 ### :beetle: Bug Fixes

diff --git a/OpenBudgeteer.Blazor/Pages/Import.razor b/OpenBudgeteer.Blazor/Pages/Import.razor
@@ -413,7 +413,7 @@
 
 <div class="mb-3">
     <h5>File Content:</h5>
-    <textarea class="form-control form-control-sm" rows="30" @bind="_dataContext.FileText"></textarea>
+    <textarea class="form-control form-control-sm no-wrap" rows="30" @bind="_dataContext.FileText"></textarea>
 </div>
 
 @if (_isConfirmationModalDialogVisible)

diff --git a/OpenBudgeteer.Blazor/Shared/MainLayout.razor b/OpenBudgeteer.Blazor/Shared/MainLayout.razor
@@ -16,7 +16,7 @@
         </button>
         <span class="navbar-brand flex-fill ms-2 fs-5">OpenBudgeteer</span>
         <span class="navbar-text ms-3 d-none d-md-block">Database: @CurrentDatabase</span>
-        <span class="navbar-text ms-3 d-none d-md-block">Version: 1.8.1 (<a href="https://github.com/TheAxelander/OpenBudgeteer/blob/master/CHANGELOG.md" target="_blank">Change Log</a>)</span>
+        <span class="navbar-text ms-3 d-none d-md-block">Version: 1.9 (<a href="https://github.com/TheAxelander/OpenBudgeteer/blob/master/CHANGELOG.md" target="_blank">Change Log</a>)</span>
     </div>
 </header>
 <div class="container-fluid">

diff --git a/OpenBudgeteer.Blazor/wwwroot/css/site.css b/OpenBudgeteer.Blazor/wwwroot/css/site.css
@@ -124,6 +124,11 @@ button.btn-bucket {
     width: 100%
 }
 
+.no-wrap {
+    overflow-x: auto; 
+    white-space: nowrap;
+}
+
 /* Overwrite bootstrap styles */
 .table td, .table tbody td, .table th, .table thead th {
     vertical-align: middle;