Make Office Hours Widget a responsive table

A volunteer is greatly appreciated.

The following patch makes the parent div scrollable on overflow-x.

Providing a new patch.

The following patch fixes help text so that it doesn't go out of the container as can you see on #7 image.

@zenimagine I've applied requested changes so that now hours and minutes are in one line when you editing the node.

Please take a look.

Providing new patch. @zenimagine, can you please test again?

I guess this only applies to the widget, not the formatter.
there is some code replicated 4 times, that could be encapsulated into a function.

I have been thinking about this, and I wonder if it might be better solved by replacing the table markup entirely?

My initial thoughts would be to do something like this: ( sort of abbreviated, but a lot of markup, sorry )

<div class="office-hours-row">
  <div class="office-hours-column">
    <div class="office-hours-label">Sunday</div>
  </div>
  <div class="office-hours-column column-start-hours">
    <div class="office-hours-inputs">
      <select name="field[0][starthours][hours]"></select>
      <select name="field[0][starthours][minutes]"></select>
      <select name="field[0][starthours][ampm]"></select>
    </div>
  <div class="office-hours-column column-end-hours">
    <div class="office-hours-inputs">
      <select name="field[0][endhours][hours]"></select>
      <select name="field[0][endhours][minutes]"></select>
      <select name="field[0][endhours][ampm]"></select>
    </div>
  </div>
  <div class="office-hours-column column-comment">
    <div class="office-hours-inputs">
      <input type="text">
    </div>
  </div>
  <div class="office-hours-column column-operations">
    <div class="office-hours-inputs">
      <a>Add time slot</a>
      <a>Copy ___ day</a>
    </div>
  </div>
</div>

div.office-hours-row { // each row
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

div.office-hours-column { // each column
  display: flex;
  flex: 1 1 auto; // or something
  flex-direction: row;
  flex-wrap: wrap;
}

My CSS probably needs some work ( also, maybe grid is a better solution than flexbox ), but the general idea would be the columns would simply start wrapping as the screen gets smaller. I think the CSS would be way simpler than the CSS + JS implementation in the patch, plus, it wouldn't depend on arbitrary breakpoints that may have nothing to do with what the site builder / themer wants.

Honestly, I did not even look at the templates, I just looked at the rendered markup and thought about how I might improve it.

I just did this in my browser's dev tools. Needs some work. This is a custom admin theme.

Office hour week table in form can be made responsive with a little css.

/*
 * CSS override for Table on Form
 */
table#edit-field-office-hours-value tr td div[id*="-starthours"],
table#edit-field-office-hours-value tr td div[id*="-endhours"],
table#edit-field-office-hours-value tr td div[class*="-comment"] {
  display: grid;
}
table#edit-field-office-hours-value input,
table#edit-field-office-hours-value select {
  width: 100%;
}
table#edit-field-office-hours-value a {
  display: block;
  white-space: normal;
  margin-bottom: 10px;
}

@media only screen and (max-width: 780px) {
  table#edit-field-office-hours-value {
    display: grid;
  }
  table#edit-field-office-hours-value thead {
    display: none;
  }
  table#edit-field-office-hours-value tbody {
    display: grid;
  }
  table#edit-field-office-hours-value tr {
    display: contents;
  }
  table#edit-field-office-hours-value tr td {
    padding: 0;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }
  table#edit-field-office-hours-value tr td div[id*="-starthours"],
  table#edit-field-office-hours-value tr td div[id*="-endhours"],
  table#edit-field-office-hours-value tr td div[class*="-comment"]{
    display: grid;
  }
  table#edit-field-office-hours-value tr td div[id*="-starthours"]:before,
  table#edit-field-office-hours-value tr td div[id*="-endhours"]:before,
  table#edit-field-office-hours-value tr td div[class*="-comment"]:before {
    display: inline-block;
    width: 70px;
  }
  table#edit-field-office-hours-value tr td div[id*="-starthours"]:before {
    content: 'From';
  }
  table#edit-field-office-hours-value tr td div[id*="-endhours"]:before {
    content: 'To';
  }
  table#edit-field-office-hours-value tr td div[class*="-comment"]:before {
    content: 'Comment';
  }
}

But I think new widget should be created and make it responsive.

Responsive table form with grid css. Tested with Seven and Claro theme.

Please be aware that #3102097: Make Widget Help text responsive was committed, doing half the trick.

Given the current state of the Widget (with many UX fixes from other issues), I guess this ticket can be closed.
Please reopen if you feel otherwise.