Fix Compare module layout to properly utilize window space

Resolved UI framing issues where metadata was crushed and not
taking available vertical space:

Layout improvements:
- Used container.NewBorder to make metadata areas expand properly
- Set minimum sizes for scroll containers (300x200)
- Removed outer VScroll - individual metadata areas now scroll
- Grid columns now properly fill available vertical space
- Instructions fixed at top, metadata expands to fill remaining space

Text wrapping fixes:
- Added fyne.TextWrapBreak to file labels
- Prevents long filenames from stretching the window horizontally
- Labels now wrap to multiple lines as needed

Architecture changes:
- Separated file headers (label + button) from content
- Each column uses Border layout: header at top, metadata fills center
- Metadata scroll containers have explicit minimum sizes
- Two-column grid properly distributes horizontal space

The layout now feels more modern with better space utilization
and smooth scrolling within the metadata panels.
This commit is contained in:
Stu Leak 2025-12-04 01:40:23 -05:00
parent 6990f18829
commit 0c88169554

68
main.go
View File

@ -5520,39 +5520,63 @@ func buildCompareView(state *appState) fyne.CanvasObject {
}, state.window) }, state.window)
}) })
// Layout // Enable text wrapping on file labels to prevent window stretching
file1Box := container.NewVBox( file1Label.Wrapping = fyne.TextWrapBreak
file2Label.Wrapping = fyne.TextWrapBreak
// File 1 header (label + button)
file1Header := container.NewVBox(
file1Label, file1Label,
file1SelectBtn, file1SelectBtn,
widget.NewSeparator(),
container.NewMax(file1ThumbBg, file1Thumbnail),
widget.NewSeparator(),
container.NewScroll(file1Info),
) )
file2Box := container.NewVBox( // File 2 header (label + button)
file2Header := container.NewVBox(
file2Label, file2Label,
file2SelectBtn, file2SelectBtn,
widget.NewSeparator(), )
container.NewMax(file2ThumbBg, file2Thumbnail),
widget.NewSeparator(), // Scrollable metadata area for file 1
container.NewScroll(file2Info), file1InfoScroll := container.NewVScroll(file1Info)
file1InfoScroll.SetMinSize(fyne.NewSize(300, 200))
// Scrollable metadata area for file 2
file2InfoScroll := container.NewVScroll(file2Info)
file2InfoScroll.SetMinSize(fyne.NewSize(300, 200))
// File 1 column: header, thumb, metadata (using Border to make metadata expand)
file1Column := container.NewBorder(
container.NewVBox(
file1Header,
widget.NewSeparator(),
container.NewMax(file1ThumbBg, file1Thumbnail),
widget.NewSeparator(),
),
nil, nil, nil,
file1InfoScroll,
)
// File 2 column: header, thumb, metadata (using Border to make metadata expand)
file2Column := container.NewBorder(
container.NewVBox(
file2Header,
widget.NewSeparator(),
container.NewMax(file2ThumbBg, file2Thumbnail),
widget.NewSeparator(),
),
nil, nil, nil,
file2InfoScroll,
) )
// Bottom bar with module color // Bottom bar with module color
bottomBar := ui.TintedBar(compareColor, container.NewHBox(layout.NewSpacer())) bottomBar := ui.TintedBar(compareColor, container.NewHBox(layout.NewSpacer()))
// Main content // Main content: instructions at top, then two columns side by side
content := container.NewVBox( content := container.NewBorder(
instructions, container.NewVBox(instructions, widget.NewSeparator()),
widget.NewSeparator(), nil, nil, nil,
container.NewGridWithColumns(2, container.NewGridWithColumns(2, file1Column, file2Column),
file1Box,
file2Box,
),
) )
scrollableContent := container.NewVScroll(content) return container.NewBorder(topBar, bottomBar, nil, nil, content)
return container.NewBorder(topBar, bottomBar, nil, nil, scrollableContent)
} }