feat(#636): adapt page margins

app/lib/common/widgets/drug_list/drug_items/drug_cards.dart

@@ -43,11 +43,9 @@ class DrugCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final drugName = formatDrugName(drug, showDrugInteractionIndicator);
-    return Padding(
-      padding: EdgeInsets.symmetric(vertical: PharMeTheme.smallSpace / 2),
-      child: RoundedCard(
+    return RoundedCard(
         onTap: onTap,
-        padding: EdgeInsets.all(8),
+        innerPadding: EdgeInsets.all(PharMeTheme.smallSpace),
         radius: 16,
         color: drug.warningLevel.color,
         child: Row(
@@ -66,15 +64,15 @@ class DrugCard extends StatelessWidget {
                           .copyWith(fontWeight: FontWeight.bold),
                     ),
                   ]),
-                  SizedBox(height: 4),
+                  SizedBox(height: PharMeTheme.smallSpace / 2),
                   if (drug.annotations.brandNames.isNotEmpty) ...[
-                    SizedBox(width: 4),
+                    SizedBox(width: PharMeTheme.smallSpace / 2),
                     Text(
                       '(${drug.annotations.brandNames.join(', ')})',
                       style: PharMeTheme.textTheme.titleMedium,
                     ),
                   ],
-                  SizedBox(height: 8),
+                  SizedBox(height: PharMeTheme.smallSpace * 0.75),
                   Text(
                     drug.annotations.drugclass,
                     style: PharMeTheme.textTheme.titleSmall,
@@ -85,7 +83,6 @@ class DrugCard extends StatelessWidget {
             Icon(Icons.chevron_right_rounded),
           ],
         ),
-      ),
     );
   }
 }

app/lib/common/widgets/drug_search.dart

@@ -65,6 +65,13 @@ class DrugSearch extends HookWidget {
                   ]
                 ),
                 SizedBox(height: PharMeTheme.smallSpace),
+                if (showDrugInteractionIndicator)
+                  PageIndicatorExplanation(
+                    context.l10n.search_page_indicator_explanation(
+                      drugInteractionIndicatorName,
+                      drugInteractionIndicator
+                    ),
+                  ),
                 scrollList(
                   keepPosition: keepPosition,
                   buildDrugList(
@@ -79,7 +86,6 @@ class DrugSearch extends HookWidget {
                     useDrugClass: useDrugClass,
                   )
                 ),
-                ..._maybeShowDrugInteractionExplanation(context),
               ],
             );
           }
@@ -88,19 +94,6 @@ class DrugSearch extends HookWidget {
     );
   }
 
-  List<Widget> _maybeShowDrugInteractionExplanation(BuildContext context) {
-    if (!showDrugInteractionIndicator) return [];
-    return [
-      SizedBox(height: PharMeTheme.smallSpace),
-      Text(
-        context.l10n.search_page_indicator_explanation(
-          drugInteractionIndicatorName,
-          drugInteractionIndicator
-        )
-      ),
-    ];
-  }
-
   Widget buildFilter(BuildContext context) {
     final cubit = context.read<DrugListCubit>();
     final filter = cubit.filter;

app/lib/common/widgets/module.dart

@@ -7,6 +7,7 @@ export 'drug_list/builder.dart';
 export 'drug_list/cubit.dart';
 export 'headings.dart';
 export 'indicators.dart';
+export 'page_indicator_explanation.dart';
 export 'page_scaffold.dart';
 export 'radiant_gradient_mask.dart';
 export 'rounded_card.dart';

app/lib/common/widgets/page_indicator_explanation.dart

@@ -0,0 +1,19 @@
+import '../module.dart';
+
+class PageIndicatorExplanation extends StatelessWidget {
+  const PageIndicatorExplanation(this.text);
+
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(
+        left: PharMeTheme.smallSpace,
+        right: PharMeTheme.smallSpace,
+        bottom: PharMeTheme.smallSpace,
+      ),
+      child: Text(text),
+    );
+  }
+}

app/lib/common/widgets/page_scaffold.dart

@@ -77,7 +77,11 @@ Scaffold unscrollablePageScaffold({
     appBar: appBar,
     body: SafeArea(
       child: Padding(
-        padding: EdgeInsets.all(padding ?? PharMeTheme.smallSpace),
+        padding: EdgeInsets.only(
+          top: padding ?? PharMeTheme.smallSpace,
+          left: padding ?? PharMeTheme.smallSpace,
+          right: padding ?? PharMeTheme.smallSpace,
+        ),
         child: body,
       ),
     ),

app/lib/common/widgets/rounded_card.dart

@@ -2,42 +2,51 @@ import '../module.dart';
 
 class RoundedCard extends StatelessWidget {
   const RoundedCard({
-    this.padding = const EdgeInsets.all(16),
+    this.innerPadding,
+    this.outerPadding,
     this.color = PharMeTheme.surfaceColor,
     this.radius = 20,
     this.onTap,
     required this.child,
   });
 
-  final EdgeInsets padding;
+  final EdgeInsets? innerPadding;
+  final EdgeInsets? outerPadding;
   final VoidCallback? onTap;
   final Color color;
   final double radius;
   final Widget child;
 
   @override
   Widget build(BuildContext context) {
-    Widget child = Padding(padding: padding, child: this.child);
+    Widget child = Padding(
+      padding: innerPadding ?? EdgeInsets.all(PharMeTheme.mediumSpace),
+      child: this.child,
+    );
 
     if (onTap != null) child = InkWell(onTap: onTap, child: child);
 
     // ignore: sized_box_for_whitespace
     return Container(
       width: double.infinity,
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          color: color,
-          border: Border.all(width: 0.5, color: PharMeTheme.borderColor),
-          borderRadius: BorderRadius.all(Radius.circular(radius)),
-          boxShadow: [
-            BoxShadow(
-              color: PharMeTheme.onSurfaceColor,
-              blurRadius: 16,
-              offset: Offset(0, 4),
-            ),
-          ],
+      child: Padding(
+        padding: outerPadding ?? EdgeInsets.symmetric(
+          horizontal: PharMeTheme.smallSpace,
+          vertical: PharMeTheme.smallSpace / 2
+        ),
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            color: color,
+            borderRadius: BorderRadius.all(Radius.circular(radius)),
+            boxShadow: [
+              BoxShadow(
+                color: PharMeTheme.onSurfaceColor,
+                blurRadius: 16,
+              ),
+            ],
+          ),
+          child: child,
         ),
-        child: child,
       ),
     );
   }

app/lib/common/widgets/scroll_list.dart

@@ -2,7 +2,10 @@ import 'package:flutter_list_view/flutter_list_view.dart';
 
 import '../module.dart';
 
-Widget scrollList(List<Widget> body, {bool keepPosition = false}) {
+Widget scrollList(List<Widget> body, {
+  bool keepPosition = false,
+  double? verticalPadding,
+}) {
   String getItemKey(Widget widget) => widget.key.toString();
   if (body.map(getItemKey).toSet().length != body.length) {
     throw Exception('Items passed to scrollList need unique keys');
@@ -12,10 +15,24 @@ Widget scrollList(List<Widget> body, {bool keepPosition = false}) {
       thumbVisibility: true,
       thickness: PharMeTheme.smallSpace / 2,
       child: Padding(
-        padding: EdgeInsets.only(right: PharMeTheme.smallSpace * 1.5),
+        padding: EdgeInsets.only(right: PharMeTheme.mediumSpace),
         child: FlutterListView(
           delegate: FlutterListViewDelegate(
-              (context, index) => body[index],
+              (context, index) => (index == 0)
+                ? Padding(
+                    padding: EdgeInsets.only(
+                      top: verticalPadding ?? PharMeTheme.smallSpace,
+                    ),
+                    child: body[index]
+                  )
+                : (index == body.length - 1)
+                  ? Padding(
+                      padding: EdgeInsets.only(
+                        bottom: verticalPadding ?? PharMeTheme.smallSpace,
+                      ),
+                      child: body[index]
+                    )
+                  : body[index],
               childCount: body.length,
               onItemKey: (index) => getItemKey(body[index]),
               keepPosition: keepPosition,

app/lib/drug/widgets/annotation_cards/guideline.dart

@@ -11,7 +11,12 @@ class GuidelineAnnotationCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return RoundedCard(
-      padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
+      innerPadding: const EdgeInsets.fromLTRB(
+        PharMeTheme.mediumSpace,
+        PharMeTheme.mediumSpace,
+        PharMeTheme.mediumSpace,
+        0
+      ),
       child: SingleChildScrollView(
         child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
           _buildHeader(context),

app/lib/drug_selection/pages/drug_selection.dart

@@ -31,7 +31,7 @@ class DrugSelectionPage extends HookWidget {
               barBottom: concludesOnboarding
                 ? context.l10n.drug_selection_onboarding_description
                 : null,
-              padding: PharMeTheme.largeSpace,
+              padding: PharMeTheme.mediumSpace,
               body: Column(
                 children: [
                   Expanded(child: _buildDrugList(context, state)),
@@ -54,7 +54,11 @@ class DrugSelectionPage extends HookWidget {
 
   Widget _buildButton(BuildContext context, DrugSelectionState state) {
     return Padding(
-      padding: EdgeInsets.only(top: PharMeTheme.mediumSpace),
+      padding: EdgeInsets.only(
+        left: PharMeTheme.mediumSpace,
+        top: PharMeTheme.mediumSpace,
+        right: PharMeTheme.mediumSpace,
+      ),
       child: FullWidthButton(
         context.l10n.action_continue,
         () async {

app/lib/report/pages/report.dart

@@ -33,38 +33,27 @@ class ReportPage extends StatelessWidget {
         barBottom: context.l10n.report_content_explanation,
         body: Column(
           children: [
+            if (hasActiveInhibitors) PageIndicatorExplanation(
+              context.l10n.report_page_indicator_explanation(
+                drugInteractionIndicatorName,
+                drugInteractionIndicator
+              ),
+            ),
             scrollList(
-              userPhenotypes.map((phenotype) =>
-                Column(
-                  key: Key('gene-card-${phenotype.geneSymbol}'),
-                  children: [
-                    GeneCard(phenotype),
-                    SizedBox(height: 8)
-                  ]  
-                )
-              ).toList()),
-            if (hasActiveInhibitors) drugInteractionExplanation(context),
+              userPhenotypes.map((phenotype) => GeneCard(
+                phenotype,
+                key: Key('gene-card-${phenotype.geneSymbol}')
+              )).toList(),
+            ),
           ]
         )
       ),
     );
   }
-
-  Widget drugInteractionExplanation(BuildContext context) {
-    return Column(children: [
-      SizedBox(height: PharMeTheme.smallSpace),
-      Text(
-        context.l10n.report_page_indicator_explanation(
-          drugInteractionIndicatorName,
-          drugInteractionIndicator
-        )
-      ),
-    ]);
-  }
 }
 
 class GeneCard extends StatelessWidget {
-  const GeneCard(this.phenotype);
+  const GeneCard(this.phenotype, { super.key });
 
   final CpicPhenotype phenotype;
 
@@ -108,7 +97,7 @@ class GeneCard extends StatelessWidget {
     ).toList();
     return RoundedCard(
       onTap: () => context.router.push(GeneRoute(phenotype: phenotype)),
-      padding: EdgeInsets.all(8),
+      innerPadding: EdgeInsets.all(PharMeTheme.smallSpace),
       radius: 16,
       child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
         Expanded(