style: fix responsiveness on mobile resolutions

FlowingCode · Jan 25, 2024 · e8e2ab2 · e8e2ab2
1 parent 5feec64
commit e8e2ab2
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java b/src/main/java/com/flowingcode/vaadin/addons/dayofweekselector/DayOfWeekSelector.java
@@ -24,6 +24,7 @@
 import com.vaadin.flow.component.customfield.CustomField;
 import com.vaadin.flow.component.datepicker.DatePicker.DatePickerI18n;
 import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.orderedlayout.FlexComponent.JustifyContentMode;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import java.time.DayOfWeek;
 import java.util.Arrays;
@@ -81,6 +82,7 @@ private void setState(boolean state) {
    */
   public DayOfWeekSelector() {
     getStyle().set("padding", "var(--lumo-space-m)");
+    getStyle().set("width", "100%");
 
     buttonsLayout = new HorizontalLayout();
     buttonsLayout.add(new DayOfWeekButton(DayOfWeek.SUNDAY, "S"));
@@ -91,6 +93,11 @@ public DayOfWeekSelector() {
     buttonsLayout.add(new DayOfWeekButton(DayOfWeek.FRIDAY, "F"));
     buttonsLayout.add(new DayOfWeekButton(DayOfWeek.SATURDAY, "S"));
 
+    buttonsLayout.setWidthFull();
+    buttonsLayout.setJustifyContentMode(JustifyContentMode.CENTER);
+    buttonsLayout.getStyle().set("flex-wrap", "wrap");
+    buttonsLayout.getStyle().set("padding", "0 10px 0 10px");
+
     getButtons().forEach(button -> button.addClickListener(ev -> updateValue()));
     add(buttonsLayout);
     clear();