Incorrect display of preview images (icons) with 'layout: table' responsive window size.

[gbdesign2023]

Kirby 4.1.0

Scenario: Listing of pages as table layout When changing the browser window width, the preview images are displayed too wide. Triggered by width: auto!important of this css-class:

@container (max-width: 40rem)
style.min.css:1
.k-table :where(th,td):not(.k-table-index-column):not(.k-table-options-column) {
    width: auto!important;
}

https://github.com/getkirby/kirby/assets/140849227/965d7d59-12da-456d-bdbf-47a9ec6c41c6

My blueprint:

  changedpages:
    label: "Chronologische Ansicht der zuletzt bearbeiteten Seiten:"
    type: pages
    query: site.index(true).sortBy('modified', 'desc')
    create: false
    layout: table
    limit: 15
    search: true
    columns:
      parentpage:
        label: "Übergeordnete Seite"
        value: "{{ page.parent ? page.parent.title : '–' }}"
        width: 1/6
      day:
        label: Datum
        value: "{{ page.modified('Y-m-d') }}"
        width: 1/6
      time:
        label: Uhrzeit
        value: "{{ page.modified('H:i:s') }}"
        after: " Uhr"
        width: 1/6
    image:
      back: "#000000"
      color: "#ffffff"
      query: false

[gbdesign2023]

The same behavior is also present with structure fields. In this case, however, the numbering is displayed.

https://github.com/getkirby/kirby/assets/140849227/b44feb02-1246-41a3-ad05-894cb44c0259

[bastianallgeier]

@getkirby/frontend It's a side-effect of fixing the mobile:true regression. I'm currently a bit clueless how we can make sure that we don't overwrite important width definitions on mobile while still keeping the table layout working.

[crisgfx]

I was just about to write a similar issue that I have with the object field, where the cells get cut off too soon and previews are hidden although there would still be enough space. Also, the field breaks out of the grid at a certain point. I've added a video to demonstrate it. If You think, this is too unrelated, I can open another issue for that.

My page blueprint looks like this:

# page settings
#...
columns:
  main:
    width: 2/3
    #...
  settings:
    width: 1/3
    sections:
      projectOptions:
        type: fields
        fields:
          #...
          objectField:
            #...

https://github.com/getkirby/kirby/assets/16305374/aa0d98d9-db97-42f8-9229-6500242a9f22

[timkinali]

I think the index, preview image and status columns should have their own classes set on both th and td, so you can target them separately / exclude them from the styling of other columns.

As a temporary quick fix, I was able to override the offending css with this:

@container (max-width: 40rem) {
  .k-table .k-table-column:has(.k-image-field-preview),  /* td image column */
  .k-table .k-table-column:has(.k-status-icon),  /* td status column */
  body .k-table .k-table-index-column + th.k-table-column,  /* th image column */
  body .k-table th.k-table-column:has(+ th.k-table-options-column),  /* th status column */
   {
     width: var(--table-row-height) !important;
  }
}

[crisgfx]

For the object field table, this temporarily fixes the container issue for me. Still not ideal though...

@container (max-width: 40rem) {
  .k-object-field {
    overflow: hidden;
  }
  .k-table.k-object-field-table tbody :where(th):is([data-mobile="true"]) {
    width: 1px !important;
    white-space: normal;
    word-break: normal;
  }
}

[timkinali]

Here's another solution for the object field, if you don't want to have linebreaks in your heading column

@container (max-width: 40rem) {
   .k-table.k-object-field-table > tbody > tr > th + td.k-table-cell {
    width: 100% !important; 
  }
}

[bastianallgeier]

We will have a proper fix for the object field in 4.1.2. Thanks to @crisgraphics for the CSS suggestions. For the width problem, we are still looking into solutions that will respect fixed widths settings and yet overwrite percent settings. It's tricky.

[gbdesign2023]

Unfortunately, when viewing files as a table on my iPhone, I can only see the icons and none of the text. Is there a solution in sight?

[gbdesign2023]

@distantnative Unfortunately, I have to say that the error is still present in 4.2.0-rc.1. This is what my blueprint looks like:

files:
  type: files
  label: Hochgeladen Dateien
  layout: table
  template: protected
  sortBy: published desc
  image: true
  text: false
  columns:
    caption:
      label: Caption
      value: "{{ file.caption.isnotempty ? '🟢' : '⚪️' }}"
      align: center
      width: 1/10
    text:
      label: Dateiname
      type: html
      value: '<a href="{{file.panel.url}}">{{ file.caption.isnotempty ? file.caption : file.name }}</a>'
      width: 4/10
    extension:
      label: Typ
      value: "{{ file.extension }}"
      align: center
      width: 1/10
    date:
      label: Datum
      value: "{{ file.published.toDate('d.m.Y') }}"
      align: center
      width: 2/10
    size:
      label: Größe
      value: "{{ file.niceSize }}"
      align: right
      width: 2/10

In addition, the file name is no longer displayed, which worked before.

[distantnative]

@gbdesign2023 The text column not filling with a value is definitely a bug.

On the mobile version here I am not so sure. You don't have any column defined as to be shown on mobile. So it's only these three columns - and if all of them would just be square... that doesn't fit with the width. So while I agree that it looks odd, I don't know what the right/other solution here could be.

[distantnative]

Text column showing again in v4.4.0-develop.