Merge pull request #1015 from pangeachat/1014-overflow-when-audio-activity-opens

fix overflow in practice activity card

lib/pangea/widgets/chat/toolbar_content_loading_indicator.dart

@@ -9,8 +9,8 @@ class ToolbarContentLoadingIndicator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      width: AppConfig.toolbarMinWidth,
-      height: AppConfig.toolbarMinHeight,
+      width: AppConfig.toolbarMinWidth / 2,
+      height: AppConfig.toolbarMinHeight / 2,
       child: Center(
         child: SizedBox(
           height: 14,

lib/pangea/widgets/practice_activity/multiple_choice_activity.dart

@@ -1,6 +1,7 @@
 import 'dart:developer';
 
 import 'package:collection/collection.dart';
+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/pangea/choreographer/widgets/choice_array.dart';
 import 'package:fluffychat/pangea/controllers/put_analytics_controller.dart';
 import 'package:fluffychat/pangea/enum/activity_type_enum.dart';
@@ -119,55 +120,62 @@ class MultipleChoiceActivityState extends State<MultipleChoiceActivity> {
   Widget build(BuildContext context) {
     final PracticeActivityModel practiceActivity = widget.currentActivity;
 
-    return Padding(
-      padding: const EdgeInsets.all(8),
-      child: Column(
-        children: [
-          Text(
-            practiceActivity.content.question,
-            style: BotStyle.text(context),
-          ),
-          const SizedBox(height: 8),
-          if (practiceActivity.activityType ==
-              ActivityTypeEnum.wordFocusListening)
-            WordAudioButton(
-              text: practiceActivity.content.answer,
-              ttsController: widget.tts,
-              eventID: widget.eventID,
+    return Container(
+      padding: const EdgeInsets.all(20),
+      constraints: const BoxConstraints(
+        maxHeight: AppConfig.toolbarMaxHeight,
+        minWidth: AppConfig.toolbarMinWidth,
+        minHeight: AppConfig.toolbarMinHeight,
+      ),
+      child: SingleChildScrollView(
+        child: Column(
+          children: [
+            Text(
+              practiceActivity.content.question,
+              style: BotStyle.text(context),
             ),
-          if (practiceActivity.activityType ==
-              ActivityTypeEnum.hiddenWordListening)
-            MessageAudioCard(
-              messageEvent:
-                  widget.practiceCardController.widget.pangeaMessageEvent,
-              overlayController:
-                  widget.practiceCardController.widget.overlayController,
-              tts: widget.practiceCardController.widget.overlayController.tts,
-              setIsPlayingAudio: widget.practiceCardController.widget
-                  .overlayController.setIsPlayingAudio,
-              onError: widget.onError,
+            const SizedBox(height: 8),
+            if (practiceActivity.activityType ==
+                ActivityTypeEnum.wordFocusListening)
+              WordAudioButton(
+                text: practiceActivity.content.answer,
+                ttsController: widget.tts,
+                eventID: widget.eventID,
+              ),
+            if (practiceActivity.activityType ==
+                ActivityTypeEnum.hiddenWordListening)
+              MessageAudioCard(
+                messageEvent:
+                    widget.practiceCardController.widget.pangeaMessageEvent,
+                overlayController:
+                    widget.practiceCardController.widget.overlayController,
+                tts: widget.practiceCardController.widget.overlayController.tts,
+                setIsPlayingAudio: widget.practiceCardController.widget
+                    .overlayController.setIsPlayingAudio,
+                onError: widget.onError,
+              ),
+            ChoicesArray(
+              isLoading: false,
+              uniqueKeyForLayerLink: (index) => "multiple_choice_$index",
+              originalSpan: "placeholder",
+              onPressed: updateChoice,
+              selectedChoiceIndex: selectedChoiceIndex,
+              choices: practiceActivity.content.choices
+                  .mapIndexed(
+                    (index, value) => Choice(
+                      text: value,
+                      color: currentRecordModel?.hasTextResponse(value) ?? false
+                          ? practiceActivity.content.choiceColor(index)
+                          : null,
+                      isGold: practiceActivity.content.isCorrect(value, index),
+                    ),
+                  )
+                  .toList(),
+              isActive: true,
+              id: currentRecordModel?.hashCode.toString(),
             ),
-          ChoicesArray(
-            isLoading: false,
-            uniqueKeyForLayerLink: (index) => "multiple_choice_$index",
-            originalSpan: "placeholder",
-            onPressed: updateChoice,
-            selectedChoiceIndex: selectedChoiceIndex,
-            choices: practiceActivity.content.choices
-                .mapIndexed(
-                  (index, value) => Choice(
-                    text: value,
-                    color: currentRecordModel?.hasTextResponse(value) ?? false
-                        ? practiceActivity.content.choiceColor(index)
-                        : null,
-                    isGold: practiceActivity.content.isCorrect(value, index),
-                  ),
-                )
-                .toList(),
-            isActive: true,
-            id: currentRecordModel?.hashCode.toString(),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }

lib/pangea/widgets/practice_activity/practice_activity_card.dart

@@ -356,11 +356,7 @@ class PracticeActivityCardState extends State<PracticeActivityCard> {
             origin: AnalyticsUpdateOrigin.practiceActivity,
           ),
         ),
-        if (activityWidget != null)
-          Padding(
-            padding: const EdgeInsets.fromLTRB(16, 20, 16, 16),
-            child: activityWidget,
-          ),
+        if (activityWidget != null) activityWidget!,
         // Conditionally show the darkening and progress indicator based on the loading state
         if (!savoringTheJoy && fetchingActivity) ...[
           // Circular progress indicator in the center