[Tablet] BadgesScreen uses fixed 3-column grid

[9thLevelSoftware]

Problem

BadgesScreen.kt uses a fixed column count that doesn't adapt to screen size.

Platforms Affected

• ✅ Android tablets
• ✅ iPads (iOS)

Affected Areas

Element	Value	Line
Grid columns	GridCells.Fixed(3)	~114

Current Behavior

An 11" tablet in landscape has space for 5-6 badge columns, but forces a 3-column grid, creating massive wasted horizontal space and inefficient use of the display. Phones could also benefit from 2 columns for better visibility.

Expected Behavior

Grid should adapt column count based on available width.

Suggested Fix

Use GridCells.Adaptive(minSize = 100.dp) or GridCells.Fixed(if (screenWidthDp > 800) 5 else 3)

Priority

🟡 High - Badges screen is highly visible and currently wastes significant space on tablets.

[9thLevelSoftware]

Implementation Notes

⚠️ Medium Risk - Visible item count will change

Changing from Fixed(3) to Adaptive() means users will see different numbers of badges per row on different devices.

Dependencies

• Can be done independently, but [Tablet] Missing WindowSizeClass implementation for responsive layouts #66 (WindowSizeClass) allows more control

Safe Implementation Options

Option A - Adaptive (simplest):

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 100.dp),
    ...
)

This auto-calculates columns based on available width.

Option B - WindowSizeClass-based (more control):

val columns = when (windowSizeClass.widthSizeClass) {
    WindowWidthSizeClass.Compact -> 3
    WindowWidthSizeClass.Medium -> 4
    WindowWidthSizeClass.Expanded -> 6
    else -> 3
}
LazyVerticalGrid(
    columns = GridCells.Fixed(columns),
    ...
)

Testing Required

• Phones show 3 columns (unchanged)
• Small tablets show 4 columns
• Large tablets show 5-6 columns
• Badge items don't stretch awkwardly
• Spacing remains consistent