Improve rendering of the habits table

config.php

@@ -10,6 +10,7 @@ class Config {
  public const DAY_ITINERARY_MONTH_OVERVIEW = 'day_itinerary_month_overview';
  public const FORMAT = 'format';
  public const HABITS = 'habits';
+ public const HABITS_TITLE = 'habits_title';
  public const LOCALE = 'locale';
  public const MONTH = 'month';
  public const MONTHS = 'months';
@@ -59,6 +60,8 @@ protected function get_configuration() : array {
  // to help tracking those habits
  self::HABITS => [
  ],
+ // Title for the habits table on month overview
+ self::HABITS_TITLE => 'Habits',
  // This is the exact size (in mm) of the ReMarkable 2 screen
  // You might want to adjust it to your device's size
  // See https://mpdf.github.io/reference/mpdf-functions/construct.html for possible values

generators/month-overview-generator.php

@@ -44,11 +44,12 @@ protected function generate_content() : void {
  }
 
  private function generate_habits_table( array $habits ) : void {
+ $habits_title = $this->config->get( Config::HABITS_TITLE );
 ?>
  <table class="content-box">
  <thead>
  <tr>
- <th></th>
+ <th rowspan="2"><?php echo $habits_title; ?></th>
 <?php
  $end_of_month = $this->month->modify( 'first day of next month' );
  $month_period = new \DatePeriod( $this->month, new \DateInterval( 'P1D' ), $end_of_month );
@@ -63,7 +64,7 @@ private function generate_habits_table( array $habits ) : void {
  echo '<th class="month-overview__habit-header disabled">&nbsp;</th>';
  }
 
- echo '</tr><tr><th></th>';
+ echo '</tr><tr>';
 
  $i = 1;
  foreach ( $month_period as $day ) {

style.css

@@ -177,6 +177,8 @@ td.calendar__week-number {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  font-weight: bold;
+ width: 100px;
+ height: 20px;
 }
 
 .month-overview__habit-box {