/* mobile-fixes.css — local overrides for Forgejo 16.x on narrow screens.
 *
 * Injected via custom/templates/custom/header.tmpl. CSS only: nothing here can
 * stop the instance from starting, unlike the version-bound template overrides
 * a full theme ships.
 *
 * ---------------------------------------------------------------------------
 * commits list, <= 767.98px
 *
 * Upstream squeezes the commit subject into a ~100px column, one word per line,
 * broken mid-word ("feat(spe / ech):"). Three shipped rules combine to cause it:
 *
 *   .commit-summary            { overflow-wrap: anywhere }
 *   #commits-table td:not(.message) { white-space: nowrap }
 *   #commits-table                  -- no table-layout, so auto layout applies
 *
 * `overflow-wrap: anywhere` lets the subject break between any two characters,
 * so its min-content width collapses to one character. The nowrap columns
 * (avatar + author, "10 hours ago", two icon buttons) therefore claim their full
 * intrinsic width first and the message column absorbs the entire shortfall.
 *
 * Widening the column alone cannot fix this at 360px: author + date + actions
 * already need ~300px. So below the tablet breakpoint each row becomes a
 * two-line card - subject on its own full-width line, metadata beneath - which
 * is the layout GitHub itself uses on mobile.
 */

@media (max-width: 767.98px) {

  /* Column headers are meaningless once rows stop being columns. */
  .repository #commits-table > thead {
    display: none;
  }

  .repository #commits-table,
  .repository #commits-table > tbody {
    display: block;
    width: 100%;
  }

  .repository #commits-table > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "message message message"
      "author  date    actions";
    align-items: center;
    gap: 4px 8px;
    padding: 10px 0;
  }

  .repository #commits-table > tbody > tr > td {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    border: none;
  }

  .repository #commits-table > tbody > tr > td.author   { grid-area: author; }
  .repository #commits-table > tbody > tr > td.message  { grid-area: message; }
  .repository #commits-table > tbody > tr > td:nth-child(4) { grid-area: date; }
  .repository #commits-table > tbody > tr > td:nth-child(5) { grid-area: actions; }

  /* The subject: wrap at word boundaries, never mid-word. Long unbroken tokens
     (a URL, a 60-char branch name) still get to break rather than overflow. */
  .repository #commits-table td.message .message-wrapper,
  .repository #commits-table td.message .commit-summary {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Author: upstream caps this at 80px for the old cramped column. With a line
     of its own there is room to show the whole name, and to ellipsis rather
     than overflow when there is not. */
  .repository #commits-table td.author .tw-flex {
    min-width: 0;
  }

  .repository #commits-table td.author .author-wrapper {
    max-width: none;
    min-width: 0;
  }

  .repository #commits-table > tbody > tr > td:nth-child(4),
  .repository #commits-table > tbody > tr > td:nth-child(5) {
    text-align: end;
  }
}