results buttons inside middle row

frontend/views/results/results-view.css

@@ -7,34 +7,8 @@
   font-size: large;
 }
 
-.big_header {
+.matchday_header {
   font-weight: bolder;
   font-size: x-large;
-}
-
-.my_grid {
-  --_lumo-grid-border-width: 0;
-}
-
-/*.inner_matchday_layout {*/
-/*  background-color: white;*/
-/*}*/
-
-/*.inner_matchday_layout > th {*/
-/*  background-color: white;*/
-/*}*/
-
-/*:host {*/
-/*  background-color: white;*/
-/*}*/
-
-/*[part~="cell"].matchday_grid {*/
-/*  background-color: white;*/
-/*}*/
-
-/*.matchday_grid .v-grid-cell {*/
-/*}*/
-
-/*.matchday_grid .v-grid-tablewrapper{*/
-/*  border: none;*/
-/*}*/
+  text-align: center;
+}

src/main/java/com/example/application/views/main/MainView.java

@@ -38,6 +38,8 @@ import java.util.Optional;
 public class MainView extends AppLayout {
     // TODO: Add Localization
     // TODO: Handle database connection with environment variables
+    // TODO: make it look even more like chess.com (use darker colors etc.)
+    // TODO: add light theme like on chess.com
 
     private final Tabs menu;
     private H1 viewTitle;

src/main/java/com/example/application/views/results/ResultsView.java

@@ -97,17 +97,20 @@ public class ResultsView extends SeasonAndMatchdayNavigationView {
 
     @Override
     protected void configureContentLayout() {
-        contentLayout = new HorizontalLayout(getPrevButton(), getMatchdayLayout(), getNextButton());
+        contentLayout = getMatchdayLayout();
         configureMatchdayLayout();
     }
 
     private void configureMatchdayLayout() {
-        getMatchdayHeader().addClassName("big_header"); // TODO: add dates
+        getMatchdayHeader().addClassName("matchday_header"); // TODO: add dates
+        getMatchdayHeader().setWidth("100%");
+        HorizontalLayout matchdayHeaderLayout = new HorizontalLayout(getPrevButton(), getMatchdayHeader(), getNextButton());
+        matchdayHeaderLayout.setWidthFull();
 
         getMatchdayLayout().setPadding(false);
-        getMatchdayLayout().add(getMatchdayHeader(), getGrid());
+        getMatchdayLayout().add(matchdayHeaderLayout, getGrid());
         getMatchdayLayout().setAlignItems(FlexComponent.Alignment.CENTER);
-        getMatchdayLayout().addClassName("inner_matchday_layout");
+        getMatchdayLayout().setWidth("");
 
         Label headerPlayer1 = new Label("Player 1");
         headerPlayer1.addClassName("column_header");
@@ -117,7 +120,8 @@ public class ResultsView extends SeasonAndMatchdayNavigationView {
         getGrid().addColumn(VaadinUtils.getPlayerRenderer(CalculatedMatch::getPlayer1))
                 .setHeader(headerPlayer1)
                 .setTextAlign(ColumnTextAlign.END)
-                .setWidth("13em");
+                .setWidth("13em")
+                .setFlexGrow(1);
 
         getGrid().addColumn((ValueProvider<CalculatedMatch, String>) this::getResultString)
                 .setHeader("vs.")
@@ -127,9 +131,10 @@ public class ResultsView extends SeasonAndMatchdayNavigationView {
         getGrid().addColumn(VaadinUtils.getPlayerRenderer(CalculatedMatch::getPlayer2))
                 .setHeader(headerPlayer2)
                 .setTextAlign(ColumnTextAlign.START)
-                .setWidth("13em");
+                .setWidth("13em")
+                .setFlexGrow(1);
 
-        getGrid().setWidth("32em");
+        getGrid().setWidth("32em"); // TODO: find a way to set this dynamically based on column widths
         getGrid().setHeightByRows(true);
 
         getGrid().addThemeVariants(GridVariant.LUMO_NO_BORDER,

src/main/java/com/example/application/views/table/TableView.java

@@ -60,7 +60,7 @@ public class TableView extends SeasonAndMatchdayNavigationView {
 
     @Override
     protected void configureContentLayout() {
-        // TODO: name (nicht nickname) fett, punktzahl fett
+        // TODO: bold matchpoints
         contentLayout = new HorizontalLayout(getGrid());
 
         Label headerPlace = new Label("Place");