feat(#712): improve alignment and overflow

hpi-dhc · Sep 4, 2024 · d1029cc · d1029cc
1 parent fc5c135
commit d1029cc
Showing 1 changed file with 46 additions and 36 deletions.
diff --git a/app/lib/report/pages/report.dart b/app/lib/report/pages/report.dart
@@ -133,53 +133,63 @@ class GeneCard extends StatelessWidget {
       ),
       radius: 16,
       color: _getHighestSeverityColor(warningLevelCounts),
-      child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
-        Expanded(
-          child: Column(
+      child: IntrinsicHeight(child: Row(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Text(
                 genotypeResult.geneDisplayString,
                 style: PharMeTheme.textTheme.titleMedium
               ),
               SizedBox(height: 8),
-              Row(
-                children: [
-                  Expanded(
-                    child: Text(
-                      phenotypeText,
-                      style: PharMeTheme.textTheme.titleSmall,
-                      overflow: TextOverflow.ellipsis,
-                    ),
+              Text(
+                phenotypeText,
+                style: PharMeTheme.textTheme.titleSmall,
+              ),
+            ],
+          ),
+          Expanded(
+            child: hasLegend
+              ? Align(
+                alignment: Alignment.bottomRight,
+                child: Padding(
+                padding: EdgeInsets.only(
+                  left: PharMeTheme.mediumSpace,
+                  right: PharMeTheme.smallSpace,
+                ),
+                child: DecoratedBox(
+                  decoration: BoxDecoration(
+                    color: Colors.white,
+                    borderRadius: BorderRadius.all(Radius.circular(10)),
                   ),
-                  if (hasLegend) DecoratedBox(
-                    decoration: BoxDecoration(
-                      color: Colors.white,
-                      borderRadius: BorderRadius.all(Radius.circular(10)),
-                    ),
-                    child: Padding(
-                      padding: EdgeInsets.symmetric(
-                        vertical: 2,
-                        horizontal: 6,
-                      ),
-                      child: Text.rich(buildWarningLevelLegend(
-                        getText: (warningLevel) {
-                          final warningLevelCount =
-                            warningLevelCounts[warningLevel]!;
-                          return warningLevelCount > 0
-                            ? warningLevelCount.toString()
-                            : null;
-                        }),
-                      ),
+                  child: Padding(
+                  padding: EdgeInsets.symmetric(
+                    vertical: PharMeTheme.smallSpace * 0.35,
+                    horizontal: PharMeTheme.smallSpace,
+                  ),
+                  child: Text.rich(
+                    buildWarningLevelLegend(
+                      getText: (warningLevel) {
+                        final warningLevelCount =
+                          warningLevelCounts[warningLevel]!;
+                        return warningLevelCount > 0
+                          ? warningLevelCount.toString()
+                          : null;
+                      }
                     ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
                   ),
-                ],
-              ),
-            ],
+                  ),
+                )),
+              )
+              : SizedBox.shrink(),
           ),
-        ),
-        Icon(Icons.chevron_right_rounded),
-      ]),
+          Icon(Icons.chevron_right_rounded),
+        ]
+      )),
     );
   }
 }