fix(view): improve scroll behavior and layout in BlockGridView (#1576)

* fix(view): improve scroll behavior and layout in BlockGridView

* chore: rename variable

---------

Co-authored-by: Niraj Nandish <[email protected]>

Author: Sembauke

mobile-app/lib/ui/views/learn/block/templates/grid/grid_view.dart

@@ -118,46 +118,49 @@ class BlockGridView extends StatelessWidget {
               ],
             ),
             if (isOpen)
-              Row(
-                children: [
-                  Container(
-                    padding: const EdgeInsets.all(8),
-                    height: 195,
-                    width: MediaQuery.of(context).size.width - 34,
-                    child: ScrollShadow(
-                      child: GridView.builder(
-                        padding: const EdgeInsets.all(0),
-                        gridDelegate:
-                            const SliverGridDelegateWithFixedCrossAxisCount(
-                          crossAxisCount: 6,
-                          mainAxisSpacing: 3,
-                          crossAxisSpacing: 3,
-                        ),
-                        itemCount: block.challenges.length,
-                        itemBuilder: (context, step) {
-                          final challenge = block.challengeTiles[step];
+              Container(
+                padding: const EdgeInsets.all(8),
+                constraints: BoxConstraints(
+                  maxHeight: 300,
+                ),
+                child: Builder(builder: (context) {
+                  final tiles = block.challengeTiles.length;
 
-                          // challenge.name follows the "Step 1", "Step 2" format
-                          // so we extract the step number here
-                          final match =
-                              RegExp(r'\d+').firstMatch(challenge.name);
-                          final stepNumber = match != null
-                              ? int.parse(match.group(0)!)
-                              : step + 1;
+                  final isScrollable = tiles > 24;
 
-                          return ChallengeTile(
-                            block: block,
-                            model: model,
-                            step: stepNumber,
-                            challengeId: challenge.id,
-                            isDownloaded: false,
-                          );
-                        },
+                  return ScrollShadow(
+                    child: GridView.builder(
+                      shrinkWrap: true,
+                      padding: const EdgeInsets.all(0),
+                      physics: isScrollable
+                          ? const AlwaysScrollableScrollPhysics()
+                          : const NeverScrollableScrollPhysics(),
+                      gridDelegate:
+                          const SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: 6,
+                        mainAxisSpacing: 3,
+                        crossAxisSpacing: 3,
                       ),
+                      itemCount: block.challenges.length,
+                      itemBuilder: (context, step) {
+                        final challenge = block.challengeTiles[step];
+                        final match = RegExp(r'\d+').firstMatch(challenge.name);
+                        final stepNumber = match != null
+                            ? int.parse(match.group(0)!)
+                            : step + 1;
+
+                        return ChallengeTile(
+                          block: block,
+                          model: model,
+                          step: stepNumber,
+                          challengeId: challenge.id,
+                          isDownloaded: false,
+                        );
+                      },
                     ),
-                  ),
-                ],
-              ),
+                  );
+                }),
+              )
           ],
         ),
       ),