fix: fill transaction table height so dropdowns aren't clipped (#280)

Simpler approach: instead of restructuring the table's scroll container,
let .table-container fill the available height (height:100% within the
transactions view; the NC layout chain provides the height context). A
full-height container has room for the column-config menu and the in-cell
editors to open even when the table has only one row. Reverts the earlier
.table-scroll wrapper / overflow-move / min-height attempts.

Author: otherworld-dev

budget/CHANGELOG.md

@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Fixed
-- Dropdowns in the transaction list (the column-configuration gear menu and the in-cell category/tag/account editors) were cut off and produced nested scrollbars when the table had only a few rows. The table's horizontal scroll clipped them vertically (a CSS side effect), and the table didn't fill the page. Horizontal scrolling now wraps only the table, and the table area stretches to fill the available height so every dropdown opens in full ([#280](https://github.com/otherworld-dev/Budget/issues/280))
+- Dropdowns in the transaction list (the column-configuration gear menu and the in-cell category/tag/account editors) were cut off when the table had only a few rows, because the table area was shorter than the dropdowns. The transaction table now fills the available height, so every dropdown has room to open in full ([#280](https://github.com/otherworld-dev/Budget/issues/280))
 
 ## [2.30.1] - 2026-06-13
 

budget/css/style.css

@@ -3544,18 +3544,14 @@ button.danger:hover {
     background: var(--color-main-background);
     border: 1px solid var(--color-border);
     border-radius: 4px;
+    overflow-x: auto;
 }
 
-/* Only the table scrolls horizontally — keeping it off .table-container
-   means the header's column-config dropdown isn't trapped in an overflow
-   context (overflow-x:auto forces overflow-y:auto, which clipped the menu
-   on short tables — #280).
-   The scroll area also stretches to fill the available height so that
-   in-cell dropdowns (category/tag/account editors) have room to open
-   instead of being clipped when the table has only a few rows. */
-.table-scroll {
-    overflow-x: auto;
-    min-height: calc(100vh - 200px);
+/* Fill the available height so the table area is tall even with few rows.
+   This gives the in-cell editors and the column-config menu room to open
+   instead of being clipped against a short container (#280). */
+#transactions-view .table-container {
+    height: 100%;
 }
 
 .table-header {

budget/templates/index.php

@@ -1659,7 +1659,6 @@ class="app-navigation-search-clear icon-close"
                     </div>
                 </div>
 
-                <div class="table-scroll">
                 <table id="transactions-table" class="transactions-table enhanced">
                     <thead>
                         <tr>
@@ -1699,7 +1698,6 @@ class="app-navigation-search-clear icon-close"
                     </thead>
                     <tbody></tbody>
                 </table>
-                </div>
 
                 <div class="pagination-controls pagination-bottom">
                     <button id="prev-page-btn-bottom" class="secondary" disabled>←</button>