No actionable comments were generated in the recent review. 🎉

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

@coderabbitai pls review

#!/bin/bash
# Read the changed file
fd "new.html.erb" --type f | grep -i transaction | xargs cat

# Also look for the DS::Dialog component to understand content_class
rg -n "content_class" --type erb -C3
rg -n "DS::Dialog" --type erb -C3 | head -60

#!/bin/bash
# Find the DS::Dialog component
fd "dialog" --type f | grep -i "ds\|design_system\|component" | head -20

# Search for the Dialog component class definition
rg -n "class Dialog" --type rb -C5 | head -40

# Search for content_class and scrollable in the dialog component
rg -n "content_class\|scrollable" --type rb -C3 | head -60

#!/bin/bash
cat app/components/DS/dialog.rb
echo "---ERB---"
cat app/components/DS/dialog.html.erb

@thomasbaker9010251 Here is my review of PR #1693.

Review: fix(transactions): update dialog content class for new transaction view

What the change does

In app/views/transactions/new.html.erb, content_class: "lg:max-h-none" is added to the DS::Dialog call:

<%= render DS::Dialog.new(scrollable: false, content_class: "lg:max-h-none") do |dialog| %>

Looking at app/components/DS/dialog.rb, content_class is appended at the end of dialog_inner_classes:

def dialog_inner_classes
  # ...modal case:
  class_names(
    "flex flex-col bg-container rounded-xl shadow-border-xs mx-3 lg:mx-0 w-full",
    "max-h-full",          # default
    WIDTHS[width],         # e.g. "lg:max-w-[550px]"
    content_class          # ← "lg:max-h-none" overrides max-h-full on lg+
  )
end

So on lg+ screens, lg:max-h-none overrides the default max-h-full, letting the dialog inner container grow to its natural content height rather than being capped at the viewport height. The before/after screenshots confirm this resolves the visual layout issue.

✅ What's correct

• The root cause is clear: scrollable: false disables overflow-auto on the inner content div, so when max-h-full was capping the container at viewport height, content at the bottom (Notes textarea, "Add transaction" button) could be cut off on large screens.
• lg:max-h-none is appropriately scoped to large screens only — mobile behavior (max-h-full) is unchanged.
• Consistent with how content_class is already used elsewhere (e.g., _cashflow_sankey.html.erb uses content_class: "!w-[96vw] max-w-[1650px]").

⚠️ One concern — missing scroll fallback on large screens

With scrollable: false, the inner content <div> has no overflow-auto. With lg:max-h-none, there is no height cap. The outer <dialog> element is h-full (full viewport height). If the form content ever grows taller than the viewport (e.g., future fields added, or a very long category/merchant dropdown), the inner div will overflow the <dialog> container with no scroll mechanism, potentially clipping content.

Suggested safer alternative — use lg:max-h-[90dvh] with overflow-y-auto as a safety net, or combine lg:max-h-none with lg:overflow-y-auto in content_class:

<%= render DS::Dialog.new(scrollable: false, content_class: "lg:max-h-none lg:overflow-y-auto") do |dialog| %>

Or if the dialog itself handles vertical scrolling at the <dialog> element level for overflowing content (browser native), this may be acceptable as-is. Worth verifying this edge case in a browser with reduced viewport height.

Summary

The change is acceptable for the current form size. The scroll fallback concern is low risk today but worth noting for future-proofing.

Nice, clean fix. The CodeRabbit suggestion to pair lg:max-h-none with lg:overflow-y-auto was already incorporated — good call. The combination is correct: scrollable: false disables overflow on the inner content div, lg:max-h-none removes the height cap on large screens, and lg:overflow-y-auto provides a scroll fallback if future form additions ever overflow the dialog. Minimal and well-targeted.

Reviewed by Claude Code

Generated by Claude Code

👋 Hello Gittensor contributor ... please swing by our Discord and read #annoucements for a request for you.