fix: improve the UI for small devices

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.2.0
+
+* Improve the UI for smaller screens to prevent overflows
+
+## 1.1.1
+
+* Removed custom definition of CustomSemantics to use the one from flutter_accessibility instead
+
 ## 1.1.0
 
 * Added CustomSemantics widget that is used to wrap all the buttons, textfields and dynamic texts to make the userstory accessible for e2e testing.

packages/flutter_availability/lib/src/ui/screens/availability_modification.dart

@@ -1,4 +1,5 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/flutter_availability.dart";
 import "package:flutter_availability/src/ui/view_models/availability_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/break_view_model.dart";
@@ -7,7 +8,6 @@ import "package:flutter_availability/src/ui/widgets/availability_template_select
 import "package:flutter_availability/src/ui/widgets/availabillity_time_selection.dart";
 import "package:flutter_availability/src/ui/widgets/base_page.dart";
 import "package:flutter_availability/src/ui/widgets/pause_selection.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability/src/util/utils.dart";
 import "package:flutter_hooks/flutter_hooks.dart";

packages/flutter_availability/lib/src/ui/screens/availability_overview.dart

@@ -1,7 +1,7 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/ui/widgets/base_page.dart";
 import "package:flutter_availability/src/ui/widgets/calendar.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/ui/widgets/template_legend.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";

packages/flutter_availability/lib/src/ui/screens/template_day_modification.dart

@@ -1,10 +1,10 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/service/errors.dart";
 import "package:flutter_availability/src/ui/view_models/day_template_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/template_daydata_view_model.dart";
 import "package:flutter_availability/src/ui/widgets/base_page.dart";
 import "package:flutter_availability/src/ui/widgets/color_selection.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/ui/widgets/template_name_input.dart";
 import "package:flutter_availability/src/ui/widgets/template_time_break.dart";
 import "package:flutter_availability/src/util/scope.dart";

packages/flutter_availability/lib/src/ui/screens/template_overview.dart

@@ -1,6 +1,6 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/ui/widgets/base_page.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 import "package:flutter_hooks/flutter_hooks.dart";

packages/flutter_availability/lib/src/ui/screens/template_week_modification.dart

@@ -1,9 +1,9 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/service/errors.dart";
 import "package:flutter_availability/src/ui/view_models/template_daydata_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/week_template_view_models.dart";
 import "package:flutter_availability/src/ui/widgets/color_selection.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/ui/widgets/template_name_input.dart";
 import "package:flutter_availability/src/ui/widgets/template_time_break.dart";
 import "package:flutter_availability/src/ui/widgets/template_week_day_selection.dart";

packages/flutter_availability/lib/src/ui/widgets/availability_clear.dart

@@ -1,5 +1,5 @@
 import "package:flutter/material.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 ///
@@ -70,9 +70,11 @@ class AvailabilityClearSection extends StatelessWidget {
               ),
             ),
             const SizedBox(width: 8),
-            Text(
+            Expanded(
-              unavailableText,
+              child: Text(
-              style: textTheme.bodyMedium,
+                unavailableText,
+                style: textTheme.bodyMedium,
+              ),
             ),
           ],
         ),

packages/flutter_availability/lib/src/ui/widgets/availability_template_selection.dart

@@ -1,5 +1,5 @@
 import "package:flutter/material.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 

packages/flutter_availability/lib/src/ui/widgets/calendar.dart

@@ -1,7 +1,7 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/flutter_availability.dart";
 import "package:flutter_availability/src/ui/widgets/calendar_grid.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 ///
@@ -73,47 +73,52 @@ class CalendarView extends StatelessWidget {
       (element) => element.templateDeviation,
     );
 
-    var monthDateSelector = Row(
+    var monthDateSelector = LayoutBuilder(
-      mainAxisAlignment: MainAxisAlignment.center,
+      builder: (context, constraints) {
-      children: [
+        var monthWidth =
-        CustomSemantics(
+            _calculateTextWidthOfLongestMonth(context, translations);
-          identifier: identifiers.previousMonthButtonIdentifier,
+        var sideSpace =
-          child: IconButton(
+            ((constraints.maxWidth - monthWidth) / 2 - 44).clamp(0.0, 44.0);
-            padding: EdgeInsets.zero,
+
-            icon: const Icon(Icons.chevron_left),
+        return Row(
-            onPressed: () {
+          mainAxisAlignment: MainAxisAlignment.center,
-              onMonthChanged(
+          children: [
-                DateTime(month.year, month.month - 1),
+            CustomSemantics(
-              );
+              identifier: identifiers.previousMonthButtonIdentifier,
-            },
+              child: IconButton(
-          ),
+                padding: EdgeInsets.zero,
-        ),
+                icon: const Icon(Icons.chevron_left),
-        const SizedBox(width: 44),
+                onPressed: () {
-        SizedBox(
+                  onMonthChanged(DateTime(month.year, month.month - 1));
-          width: _calculateTextWidthOfLongestMonth(context, translations),
+                },
-          child: CustomSemantics(
+              ),
-            identifier: identifiers.monthNameTextIdentifier,
-            child: Text(
-              translations.monthYearFormatter(context, month),
-              style: textTheme.titleMedium,
-              textAlign: TextAlign.center,
             ),
-          ),
+            SizedBox(width: sideSpace),
-        ),
+            SizedBox(
-        const SizedBox(width: 44),
+              width: monthWidth,
-        CustomSemantics(
+              child: CustomSemantics(
-          identifier: identifiers.nextMonthButtonIdentifier,
+                identifier: identifiers.monthNameTextIdentifier,
-          child: IconButton(
+                child: Text(
-            padding: EdgeInsets.zero,
+                  translations.monthYearFormatter(context, month),
-            icon: const Icon(Icons.chevron_right),
+                  style: textTheme.titleMedium,
-            onPressed: () {
+                  textAlign: TextAlign.center,
-              onMonthChanged(
+                ),
-                DateTime(month.year, month.month + 1),
+              ),
-              );
+            ),
-            },
+            SizedBox(width: sideSpace),
-          ),
+            CustomSemantics(
-        ),
+              identifier: identifiers.nextMonthButtonIdentifier,
-      ],
+              child: IconButton(
+                padding: EdgeInsets.zero,
+                icon: const Icon(Icons.chevron_right),
+                onPressed: () {
+                  onMonthChanged(DateTime(month.year, month.month + 1));
+                },
+              ),
+            ),
+          ],
+        );
+      },
     );
 
     var calendarGrid = CalendarGrid(

packages/flutter_availability/lib/src/ui/widgets/calendar_grid.dart

@@ -1,6 +1,6 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/flutter_availability.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// Returns the days of the week as abbreviated strings
@@ -167,9 +167,12 @@ class _CalendarDay extends StatelessWidget {
             children: [
               Center(
                 child: Container(
-                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  padding: const EdgeInsets.symmetric(horizontal: 2),
                   decoration: decoration,
-                  child: Text(day.date.day.toString(), style: textStyle),
+                  child: Text(
+                    day.date.day.toString(),
+                    style: textStyle,
+                  ),
                 ),
               ),
               if (day.templateDeviation) ...[

packages/flutter_availability/lib/src/ui/widgets/color_selection.dart

@@ -1,7 +1,7 @@
 import "dart:math";
 
 import "package:flutter/material.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// Widget for selecting a color for a template

packages/flutter_availability/lib/src/ui/widgets/input_fields.dart

@@ -1,6 +1,6 @@
 import "package:flutter/material.dart";
 import "package:flutter/services.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// An input field for time selection

packages/flutter_availability/lib/src/ui/widgets/pause_selection.dart

@@ -1,10 +1,10 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/flutter_availability.dart";
 import "package:flutter_availability/src/service/pop_handler.dart";
 import "package:flutter_availability/src/ui/view_models/break_view_model.dart";
 import "package:flutter_availability/src/ui/widgets/generic_time_selection.dart";
 import "package:flutter_availability/src/ui/widgets/input_fields.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 ///

packages/flutter_availability/lib/src/ui/widgets/semantic_widget.dart

@@ -1,62 +0,0 @@
-import "dart:io";
-
-import "package:flutter/foundation.dart";
-import "package:flutter/material.dart";
-
-/// A wrapper that wraps a widget with a [Semantics] widget.
-/// This is used for testing purposes to add a unique identifier to a widget.
-/// Use this element for all widgets that have something that should be
-/// selectable in tests (buttons, textfields, dynamic texts)
-/// The [identifier] should be unique for the specific screen.
-/// To make sure the accessibility ID is set for all platforms this widget
-/// uses a label for android when it is not a textfield.
-/// [container] is set to true to make sure the widget is always its own
-/// accessibility element.
-/// [excludeSemantics] is set to false to make sure that children of this widget
-/// can still be interacted with.
-/// [isTextField] can be set to true because for textField the
-/// [excludeSemantics] modifies the behavior of the textfield in e2e tests.
-class CustomSemantics extends StatelessWidget {
-  /// Creates a [CustomSemantics] widget.
-  /// The [identifier] should be unique for the specific screen.
-  /// [isTextField] if this widget is a TextField or TextFormField
-  /// [excludeSemantics] if the [Semantics] widget should exclude the semantics
-  /// of its children. This is done by default if it not a textfield.
-  const CustomSemantics({
-    required this.identifier,
-    required this.child,
-    this.excludeSemantics = false,
-    this.isTextField = false,
-    super.key,
-  });
-
-  /// The widget that should be wrapped with a [Semantics] widget.
-  final Widget child;
-
-  /// Identifier for the widget that should be unique for the specific screen.
-  final String? identifier;
-
-  /// If the [Semantics] widget should exclude the semantics of its children.
-  final bool excludeSemantics;
-
-  /// If the widget is a textfield, the [child] can't be excluded. This is
-  /// because otherwise the textfield doesn't work in e2e tests with Appium.
-  final bool isTextField;
-
-  @override
-  Widget build(BuildContext context) {
-    var isAndroid = !kIsWeb && Platform.isAndroid;
-
-    var excludeSemantics = (!isTextField && isAndroid) || this.excludeSemantics;
-
-    var label = !isTextField && isAndroid ? identifier : null;
-
-    return Semantics(
-      excludeSemantics: excludeSemantics,
-      container: true,
-      label: label,
-      identifier: identifier,
-      child: child,
-    );
-  }
-}

packages/flutter_availability/lib/src/ui/widgets/template_legend.dart

@@ -1,6 +1,6 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/config/availability_options.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 
@@ -76,9 +76,11 @@ class _TemplateLegendState extends State<TemplateLegend> {
               const SizedBox(width: 12),
               const Icon(Icons.add, size: 20),
               const SizedBox(width: 6),
-              Text(
+              Expanded(
-                translations.createTemplateButton,
+                child: Text(
-                style: textTheme.bodyLarge,
+                  translations.createTemplateButton,
+                  style: textTheme.bodyLarge,
+                ),
               ),
             ],
           ),

packages/flutter_availability/lib/src/ui/widgets/template_name_input.dart

@@ -1,5 +1,5 @@
 import "package:flutter/material.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// Input section for the template name

packages/flutter_availability/lib/src/ui/widgets/template_week_day_selection.dart

@@ -1,8 +1,8 @@
 // ignore_for_file: avoid_positional_boolean_parameters
 
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/ui/widgets/calendar_grid.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 
 /// A widget for selecting a day of the week

packages/flutter_availability/lib/src/ui/widgets/template_week_overview.dart

@@ -1,9 +1,9 @@
 import "package:flutter/material.dart";
+import "package:flutter_accessibility/flutter_accessibility.dart";
 import "package:flutter_availability/src/ui/view_models/break_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/template_daydata_view_model.dart";
 import "package:flutter_availability/src/ui/view_models/week_template_view_models.dart";
 import "package:flutter_availability/src/ui/widgets/calendar_grid.dart";
-import "package:flutter_availability/src/ui/widgets/semantic_widget.dart";
 import "package:flutter_availability/src/util/scope.dart";
 import "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 

packages/flutter_availability/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_availability
 description: "Flutter availability userstory package"
-version: 1.1.0
+version: 1.2.0
 
 publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub
 
@@ -14,7 +14,10 @@ dependencies:
   flutter_hooks: ^0.20.5
   flutter_availability_data_interface:
     hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
-    version: ^1.1.0
+    version: ^1.2.0
+  flutter_accessibility:
+    hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
+    version: ^0.0.3
 
 dev_dependencies:
   flutter_test:

packages/flutter_availability_data_interface/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_availability_data_interface
 description: "The data interface for the flutter_availability component"
-version: 1.1.0
+version: 1.2.0
 
 publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub