Make datatable responsive

[JustCarmen]

Added <div class="table-responsive"> around the datatable to allow horizontal scrolling on smaller screens. Otherwise the update button cannot be reached on smaller screens.

[Jefferson49]

Hi Carmen,

thank you very much for providing the pull request. I like the idea of making the table responsive.

However, in tests with the responsive table, it seems to look worse in a normal large screen browser. I tested with Edge and Firefox. In my tests, the right column is "cut off". It seems that the responsive table is rendered differently by webtrees:

The shown issue about the table width and the columns can be improved with the "Configure columns" option offered by the additional button. If some columns are de-selected, the responsive table looks fine again.

Since the responsive table seems to have advantages and disadvantages: What do think about an option to configure the responsive table in the control panel?

General comment: The column width of the table is at its limit anyway. For some users with different browsers, even the current table (non responsive) has columns, which are not visible. Therefore, table and column width is a limited resource.

[JustCarmen]

It’s expected behaviour for a responsive table to stay within its container. Even on large screens, Bootstrap prevents the table from overflowing horizontally, so the layout remains consistent and the horizontal scrollbar appears only when needed. A non‑responsive table can extend beyond the container, which is why it may look wider on large screens.

You can still scroll horizontally in the responsive version by clicking inside the table and using the arrow keys, or by using the scrollbar at the bottom.

If this behaviour feels less ideal for users with large screens, then adding a configuration option in the control panel sounds like a good solution. Users on smaller screens would benefit from the responsive version, while others could choose the non‑responsive layout if they prefer.