/* Mobile-friendly PR / commit / compare code diffs for Forgejo.
   Loaded via templates/custom/header.tmpl — narrow viewports only.
   Do NOT force word-break on .code-inner (collapses cells to 1 char/line). */

@media (max-width: 767.98px) {
  /* Use full width: wide monospace diffs need every pixel. */
  .page-content .ui.ui.ui.container:not(.fluid) {
    --container-width: 100%;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }

  /* Keep horizontal scroll inside each file card, not the whole page. */
  .repository .diff-file-box {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .repository .diff-file-box .diff-file-body,
  .repository .diff-file-box .file-body.file-code,
  .repository .diff-file-box .code-diff-split,
  .repository .code-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Undo Forgejo's break-all on mobile — keep real lines, scroll sideways. */
  .repository .diff-file-box .code-inner,
  .repository .code-view .code-inner {
    white-space: pre !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Slightly denser code; do not shrink table cells to zero. */
  .repository .diff-file-box .code-inner,
  .repository .diff-file-box .lines-code,
  .repository .diff-file-box .lines-num {
    font-size: 11px;
    line-height: 1.4;
  }

  .repository .diff-file-box .file-body.file-code .lines-num,
  .repository .diff-file-box .code-diff .lines-num {
    min-width: 2.5rem !important;
    padding-left: 2px !important;
    padding-right: 4px !important;
  }

  .repository .diff-file-box .code-diff .lines-type-marker {
    display: none;
  }

  .repository .diff-file-box .code-diff td {
    padding-left: 4px !important;
  }

  /* Give the code column room so it does not collapse. */
  .repository .diff-file-box .code-diff .lines-code {
    width: auto !important;
    min-width: 20rem;
  }

  .diff-file-header,
  .file-header,
  .repository .diff-detail-box {
    flex-wrap: wrap;
    gap: 0.35rem;
    row-gap: 0.35rem;
  }

  .diff-file-header .file-actions,
  .file-header .file-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .repository .diff-file-box .diff-file-header .toggle-file,
  .repository .diff-detail-box .ui.button,
  .repository .diff-detail-box a.ui.button {
    min-height: 2.25rem;
    min-width: 2.25rem;
  }
}