[Community vote] Make the default share block more compact and mobile-friendly

[BionicCode]

Feature support

Tip

Help move this idea forward

• Use the 👍 reaction to show support for this feature.

---

Context

This is a narrowly scoped follow-up to
nc-connector/NC_Connector_for_Thunderbird#28.

Locally editable templates and client-selectable presentation modes are not part
of this request. The proposal retains one centrally maintained built-in template
for every client.

Quick checks

• I searched existing issues and the public roadmap first.

What problem would this solve?

Problem

The current backend-managed default share block has two related presentation
problems.

1. It occupies considerably more vertical space than its content requires and
   can visually dominate short business messages.

   In particular:

   • short field labels wrap because the label column is fixed at 13ch;
   • every metadata row uses 6px vertical padding;
   • introductory paragraphs use 14px bottom margins;
   • the content and footer have generous independent padding;
   • the fixed 640 px width prevents the card from sizing naturally to its
     contents.

2. The template fixes the font family and font size independently of the surrounding message. This causes visibly inconsistent typography when the compose window uses different formatting.

Proposed default layout

The proposed template preserves the current blue branding header and the same
functional information, but:

• sizes columns according to their content;
• keeps short labels on one line;
• reduces vertical padding and paragraph spacing;
• places related metadata more efficiently;
• uses a descriptive link caption rather than displaying the raw URL;
• inherits the surrounding message typography where practical.

Because this is the backend-managed default template, the proposed layout is intended to be shared by the Thunderbird and Outlook connectors. Both clients should be verified before the change is released. ## Before-and-after measurements

• Current rendered height: ~229 px
• Proposed rendered height: ~149 px
• Reduction: 35 %

Both screenshots use the same content and rendering environment.

Mobile rendering

The fixed 640px width of the current template version also affects mobile readability.

The following side-by-side comparison uses the same message content, device,
mail client, and display settings:

• Left: proposed content-sized template
• Right: current fixed-width template

In the current version, the mail client scales the entire message down so that the fixed-width share block fits the viewport. This also reduces the size of the ordinary message text above the block.

The proposed template uses intrinsic width with max-width: 100%, allowing it
to fit the available mobile viewport without forcing the complete message into
a significantly reduced rendering scale.

What should happen?

Proposed HTML

The visible raw {URL} is replaced by the compact descriptive anchor text
Access attachments. This prevents long tokenized URLs from controlling the
intrinsic width of the card. A future mode-aware link-text placeholder could
replace this fixed caption without requiring another layout change.

Compatibility with mode-aware wording

The proposed HTML also provides neutral fallback wording for the related
link-target and wording work tracked in:

• Normal Nextcloud share-page URLs are labelled as download links NC_Connector_for_Thunderbird#26
• Support mode-aware share link wording in backend templates #6
• Add backend policy for attachment link target #7

It replaces download with access and Download link with the neutral
label Link. This is intended as a release-compatible fallback until the
rendered wording can describe the selected link target dynamically.

<!--
  Compact built-in NC Connector share block — drop-in variant.

  Compatibility goal:
  - Uses only the currently supported placeholders:
    {NOTE}, {URL}, {EXPIRATIONDATE}, {PASSWORD}, and {RIGHTS}.
  - Does not require a new client-side template contract.
  - Keeps the existing centrally managed presentation model.

  Layout goal:
  - Removes the redundant nested branding table.
  - Uses intrinsic width instead of a fixed 640 px card.
  - Keeps the metadata row compact and prevents the raw token URL from
    determining the card width.
  - Lets the surrounding email provide the font family and base font size.
-->
<div style="margin: 12px 0;">
  <!--
    Outer attachment card.
    width:auto makes the card content-sized; max-width:100% limits it to the
    available message width where supported.
  -->
  <table role="presentation" border="0" cellspacing="0" cellpadding="0" style="
      border-collapse: separate;
      border-spacing: 0;
      width: auto;
      max-width: 100%;
      margin: 0;
      background-color: transparent;
      border: 1px solid #d7d7db;
      border-radius: 8px;
      overflow: hidden;
    ">
    <tbody>
      <!-- Branding header integrated directly into the outer card. -->
      <tr>
        <td style="
            padding: 0;
            background-color: #0082c9;
            text-align: center;
            vertical-align: middle;
            line-height: 0;
            font-size: 0;
            border-radius: 7px 7px 0 0;
          ">
          <a href="https://nc-connector.de" target="_blank" rel="noopener noreferrer" style="
              display: inline-block;
              text-decoration: none;
              line-height: 0;
              font-size: 0;
              vertical-align: middle;
            ">
            <!--
               The URL fragment
                prevents the current branding normalizer from restoring the image to 32 px.
            -->
            <img
              src="/apps/ncc_backend_4mc/img/runtime/default_share_html_block_template_15c65fda32f2.png?v=2952d086309f"
              data-nccb-original-src="https://raw.githubusercontent.com/nc-connector/.github/refs/heads/main/profile/header-solid-blue.png#height-28"
              height="28" alt="NC Connector" style="
                display: block;
                height: 28px;
                width: auto;
                border: 0;
                margin: 0 auto;
              ">
          </a>
        </td>
      </tr>

      <tr>
        <td style="padding: 10px 12px 9px 12px;">
          <!--
            NOTE has its own removable block. When NOTE is empty, the connector
            can remove this paragraph without affecting unrelated content.
          -->
          <p style="margin: 0 0 6px 0; line-height: 1.3; overflow-wrap: anywhere;">
            {NOTE}
          </p>

          <!--
            Hardcoded wording keeps this variant drop-in compatible.
            The explicit line break produces a predictable two-part message.
            This prose can still influence the card's intrinsic width.
          -->
          <p style="margin: 0 0 7px 0; line-height: 1.3; overflow-wrap: anywhere;">
            The files have been provided securely and in a privacy-compliant manner via Nextcloud.<br>
            You can access them using the link below.
          </p>

          <!--
            Compact metadata grid.
            Short labels stay on one line. Unbounded optional values can wrap.
          -->
          <table role="presentation" border="0" cellspacing="0" cellpadding="0" style="
              border-collapse: collapse;
              width: auto;
              max-width: 100%;
              margin: 0;
            ">
            <tbody>
              <tr>
                <!--
                  Neutral fixed label: valid for either a share-page link or a
                  direct-download link without requiring a dynamic placeholder.
                -->
                <th scope="row" style="
                    padding: 3px 10px 3px 0;
                    text-align: left;
                    vertical-align: top;
                    white-space: nowrap;
                    font-weight: bold;
                  ">
                  Link
                </th>

                <!--
                  Descriptive anchor text prevents the long tokenized URL from
                  unnecessarily widening or visually breaking the table.
                -->
                <td style="
                    padding: 3px 20px 3px 0;
                    vertical-align: top;
                    white-space: nowrap;
                  ">
                  <a href="{URL}" style="color: #0082c9; text-decoration: none;">Access attachments</a>
                </td>

                <td colspan="2" style="
                    padding: 3px 0;
                    vertical-align: top;
                    white-space: nowrap;
                  ">
                  <!--
                    EXPIRATIONDATE is isolated in a removable DIV. If no expiry
                    exists, pruning this DIV does not remove the essential link.
                  -->
                  <div>
                    <strong>Expiration date:</strong> {EXPIRATIONDATE}
                  </div>
                </td>
              </tr>

              <!--
                PASSWORD occupies its own row so the complete row can be pruned
                when no password is present.
              -->
              <tr>
                <th scope="row" style="
                    padding: 3px 10px 3px 0;
                    text-align: left;
                    vertical-align: top;
                    white-space: nowrap;
                    font-weight: bold;
                  ">
                  Password
                </th>
                <td colspan="3" style="
                    padding: 3px 0;
                    vertical-align: top;
                    overflow-wrap: anywhere;
                    word-break: break-word;
                  ">
                  <span style="
                      display: inline-block;
                      max-width: 100%;
                      padding: 1px 5px;
                      border: 1px solid #c7c7c7;
                      border-radius: 3px;
                      font-family: Consolas, 'Courier New', monospace;
                      white-space: normal;
                      overflow-wrap: anywhere;
                      word-break: break-all;
                    ">{PASSWORD}</span>
                </td>
              </tr>

              <!--
                RIGHTS occupies its own row so it can be removed independently
                when attachment mode suppresses permission details.
              -->
              <tr>
                <th scope="row" style="
                    padding: 3px 10px 3px 0;
                    text-align: left;
                    vertical-align: top;
                    white-space: nowrap;
                    font-weight: bold;
                  ">
                  Rights
                </th>
                <td colspan="3" style="
                    padding: 3px 0;
                    vertical-align: top;
                    overflow-wrap: anywhere;
                    word-break: break-word;
                  ">
                  {RIGHTS}
                </td>
              </tr>
            </tbody>
          </table>

          <!-- Compact product attribution retained from the existing template. -->
          <div style="
              margin: 6px 0 0 0;
              font-size: 9pt;
              font-style: italic;
              line-height: 1.25;
            ">
            Shared via
            <a href="https://nextcloud.com/" style="color: #0082c9; text-decoration: none;">Nextcloud</a>.
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Compatibility note

The HTML above is intentionally a drop-in replacement for the template contract
exposed by the current released backend editor. It therefore uses only the
placeholders available in that release and retains literal introductory and
label text.

Backend main has since introduced {LINK_INTRO} and {LINK_LABEL} while
implementing nc-connector/NC_Connector_for_Thunderbird#26 and #6. When applying
this layout to the current development version, those placeholders can be
retained in the corresponding introduction and label positions without changing
the proposed structure or sizing.

Acceptance criteria

• There remains one backend-managed default share template.
• No local template editor or per-client template customization is introduced.
• Existing backend template authority remains unchanged.
• Short labels do not wrap when sufficient horizontal space exists.
• The card uses intrinsic width rather than forcing a 640 px layout.
• The block remains usable in narrow message panes.
• The surrounding message supplies the normal font family and base font size.
• Optional fields are removed without removing unrelated content.
• The logo renders at 28 px without depending on an installation-specific
  runtime asset URL.
• HTML and plain-text message generation remain functional.
• The result is verified in both the Thunderbird and Outlook connectors.

Affected area

Sharing policies / templates

Client impact

• Thunderbird needs matching support.
• Outlook needs matching support.
• This is backend-only.

Additional context

No response

Implementation issues

• Thunderbird: Thunderbird: [Community vote] Make the default share block more compact and mobile-friendly NC_Connector_for_Thunderbird#48
• Outlook: Outlook: [Community vote] Make the default share block more compact and mobile-friendly NC_Connector_for_Outlook#26
• Backend: Backend: [Community vote] Make the default share block more compact and mobile-friendly #13

[DeBaschdi]

With the new <LINK_INTRO> variable and the [automatic table width](max-width: 100%), there would be no automatic line break.

[BionicCode]

Thank you; that makes sense.

With {LINK_INTRO}, the template cannot place a deliberate line break inside
the dynamically supplied text. At the same time, width: auto allows the card
to expand until the complete introduction fits on one line.

A possible solution is to let the outer table request the smallest possible
width by using width: 1px with the default automatic table layout, instead of
the current fixed 640px width.

The non-wrapping Link row then establishes the minimum intrinsic width needed
by the metadata table. The outer card expands to accommodate that row, while
the introduction, note, password, and permissions can wrap within the resulting
width.

In effect:

• the Link row determines the natural card width;
• other content wraps within that width;
• the card remains substantially more compact than the current fixed-width
  version.

I will now test this layout in the editor preview and then validate the rendered
result in the supported mail clients, particularly Thunderbird and Outlook. I
will provide the comparison screenshots separately.

[BionicCode]

Ok. Sorry for having you waiting. I had an incident and couldn't work. But I h ave n ow completed the work and fixed the horizontal stretch.

The new HTML produces the following template:

<!--
  Compact built-in NC Connector share block — drop-in variant.

  Compatibility goal:
  - Uses only the currently supported placeholders:
    {NOTE}, {LINK_INTRO}, {LINK_LABEL}, {URL}, {EXPIRATIONDATE},
    {PASSWORD}, and {RIGHTS}.
  - Does not require a new client-side template contract.
  - Keeps the existing centrally managed presentation model.

  Layout goal:
  - Removes the redundant nested branding table.
  - Uses intrinsic width instead of a fixed 640 px card.
  - Keeps the metadata layout compact and prevents the raw token URL from
    determining the card width.
  - Lets ordinary message content inherit the surrounding email's font family
    and base font size.
-->
<div style="margin: 12px 0">
    <!--
      Outer attachment card.

      The requested width of 1 px asks the automatic table-layout algorithm to
      shrink the card to the minimum width required by its contents. The inner
      content wrapper supplies a 250 px readability floor, while wider metadata
      rows may expand the card naturally.
    -->
    <table
        role="presentation"
        border="0"
        cellspacing="0"
        cellpadding="0"
        width="1"
        style="
            table-layout: auto;
            border-collapse: separate;
            border-spacing: 0;
            width: 1px;
            margin: 0;
            background-color: transparent;
            border: 1px solid #d7d7db;
            border-radius: 8px;
            overflow: hidden;
        "
    >
        <tbody>
            <!-- Branding header integrated directly into the outer card. -->
            <tr>
                <td
                    bgcolor="#0082c9"
                    style="
                        padding: 0;
                        background-color: #0082c9;
                        text-align: center;
                        vertical-align: middle;
                        line-height: 0;
                        font-size: 0;
                    "
                >
                    <a
                        href="https://nc-connector.de"
                        target="_blank"
                        rel="noopener noreferrer"
                        style="
                            display: inline-block;
                            text-decoration: none;
                            line-height: 0;
                            font-size: 0;
                            vertical-align: middle;
                        "
                    >
                        <!--
                          Maintainer note:
                                    
                          The src value below is a runtime asset path generated by this specific
                          Nextcloud backend installation. Do not copy this literal path into the
                          repository's canonical default template.
                                    
                          When adopting this template, replace src with the backend's normal
                          dynamically generated branding-resource reference or placeholder.
                                    
                          The #height-28 fragment on data-nccb-original-src is currently used only to
                          prevent the branding normalizer from restoring the image height to 32 px.
                          Prefer updating the normalizer/default branding configuration to support the
                          intended 28 px height directly.
                        -->
                        <img
                            src="/apps/ncc_backend_4mc/img/runtime/default_share_html_block_template_15c65fda32f2.png?v=2952d086309f"
                            data-nccb-original-src="https://raw.githubusercontent.com/nc-connector/.github/refs/heads/main/profile/header-solid-blue.png#height-28"
                            height="28"
                            alt="NC Connector"
                            style="
                                display: block;
                                height: 28px;
                                width: auto;
                                border: 0;
                                margin: 0 auto;
                            "
                        />
                    </a>
                </td>
            </tr>

            <tr>
                <td style="padding: 10px 12px 9px 12px">
                    <!--
                      Establishes a minimum readable content width without
                      fixing the final card width. Wider metadata rows may
                      still expand the card naturally.
                    -->
                    <div style="min-width: 250px">
                        <!--
                          NOTE has its own removable block. When NOTE is empty,
                          the connector can remove this paragraph without
                          affecting unrelated content.
                        -->
                        <p
                            style="
                                margin: 0 0 6px 0;
                                line-height: 1.3;
                                overflow-wrap: anywhere;
                            "
                        >
                            {NOTE}
                        </p>

                        <!--
                          Mode-aware introductory text supplied by the
                          connector. Keeping it in its own paragraph allows it
                          to be localized and removed independently.
                        -->
                        <p
                            style="
                                margin: 0 0 7px 0;
                                line-height: 1.3;
                                overflow-wrap: anywhere;
                            "
                        >
                            {LINK_INTRO}
                        </p>

                        <!--
                          Compact two-column metadata grid.

                          Labels and atomic metadata stay on one line. The
                          password remains breakable so long values do not
                          determine the card width.

                          valign attributes accompany CSS vertical alignment
                          for compatibility with Outlook Classic.
                        -->
                        <table
                            role="presentation"
                            border="0"
                            cellspacing="0"
                            cellpadding="0"
                            style="
                                border-collapse: collapse;
                                width: auto;
                                margin: 0;
                            "
                        >
                            <tbody>
                                <!-- Link and optional expiration -->
                                <tr>
                                    <th
                                        scope="row"
                                        nowrap="nowrap"
                                        valign="middle"
                                        style="
                                            padding: 3px 10px 3px 0;
                                            text-align: left;
                                            vertical-align: middle;
                                            white-space: nowrap;
                                            font-weight: bold;
                                            line-height: 1.2;
                                        "
                                    >
                                        {LINK_LABEL}:
                                    </th>

                                    <td
                                        valign="middle"
                                        style="
                                            padding: 3px 0;
                                            vertical-align: middle;
                                            line-height: 1.2;
                                        "
                                    >
                                        <!--
                                          Link and expiration are kept inside
                                          one value cell.

                                          The nested table prevents Outlook
                                          from distributing the expiration
                                          information as a separate outer-table
                                          column when the card expands.
                                        -->
                                        <table
                                            role="presentation"
                                            border="0"
                                            cellspacing="0"
                                            cellpadding="0"
                                            align="left"
                                            style="
                                                border-collapse: collapse;
                                                width: auto;
                                                margin: 0;
                                            "
                                        >
                                            <tbody>
                                                <tr>
                                                    <!-- Link action -->
                                                    <td
                                                        nowrap="nowrap"
                                                        valign="middle"
                                                        style="
                                                            padding: 0;
                                                            vertical-align: middle;
                                                            white-space: nowrap;
                                                            line-height: 1.2;
                                                        "
                                                    >
                                                        <a
                                                            href="{URL}"
                                                            style="
                                                                color: #0082c9;
                                                                text-decoration: none;
                                                                white-space: nowrap;
                                                            "
                                                            >Access&nbsp;attachments</a
                                                        >
                                                    </td>

                                                    <!--
                                                      Expiration is isolated
                                                      inside a removable
                                                      container so the
                                                      connector can prune it
                                                      without removing the
                                                      Link row.

                                                      The expiration cell owns
                                                      the left spacing because
                                                      Outlook handles
                                                      table-cell padding more
                                                      reliably than spacing on
                                                      nested block elements.

                                                      If expiration is absent,
                                                      the empty trailing cell
                                                      may remain, but it does
                                                      not affect the visible
                                                      layout under the card's
                                                      normal minimum-width
                                                      floor.
                                                    -->
                                                    <td
                                                        nowrap="nowrap"
                                                        valign="middle"
                                                        style="
                                                            padding: 0 0 0 20px;
                                                            vertical-align: middle;
                                                            white-space: nowrap;
                                                            line-height: 1.2;
                                                        "
                                                    >
                                                        <div
                                                            style="
                                                                display: inline-block;
                                                                vertical-align: middle;
                                                                white-space: nowrap;
                                                                line-height: 1.2;
                                                            "
                                                        >
                                                            <strong
                                                                >Expiration&nbsp;date:</strong
                                                            >&nbsp;{EXPIRATIONDATE}
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>

                                <!--
                                  PASSWORD occupies its own row so the complete
                                  row can be pruned when no password is present.
                                -->
                                <tr>
                                    <th
                                        scope="row"
                                        nowrap="nowrap"
                                        valign="middle"
                                        style="
                                            padding: 3px 10px 3px 0;
                                            text-align: left;
                                            vertical-align: middle;
                                            white-space: nowrap;
                                            font-weight: bold;
                                            line-height: 1.2;
                                        "
                                    >
                                        Password:
                                    </th>

                                    <td
                                        valign="middle"
                                        style="
                                            padding: 3px 0;
                                            vertical-align: middle;
                                            overflow-wrap: anywhere;
                                            word-break: break-word;
                                            line-height: 1.2;
                                        "
                                    >
                                        <span
                                            style="
                                                display: inline-block;
                                                max-width: 100%;
                                                padding: 1px 5px;
                                                border: 1px solid #c7c7c7;
                                                border-radius: 4px;
                                                font-family:
                                                    Consolas,
                                                    &quot;Courier New&quot;,
                                                    monospace;
                                                line-height: 1.2;
                                                vertical-align: middle;
                                                white-space: normal;
                                                overflow-wrap: anywhere;
                                                word-break: break-all;
                                            "
                                            >{PASSWORD}</span
                                        >
                                    </td>
                                </tr>

                                <!--
                                  RIGHTS occupies its own row so it can be
                                  removed independently when attachment mode
                                  suppresses permission details.
                                -->
                                <tr>
                                    <th
                                        scope="row"
                                        nowrap="nowrap"
                                        valign="middle"
                                        style="
                                            padding: 3px 10px 3px 0;
                                            text-align: left;
                                            vertical-align: middle;
                                            white-space: nowrap;
                                            font-weight: bold;
                                            line-height: 1.2;
                                        "
                                    >
                                        Rights:
                                    </th>

                                    <td
                                        nowrap="nowrap"
                                        valign="middle"
                                        style="
                                            padding: 3px 0;
                                            vertical-align: middle;
                                            white-space: nowrap;
                                            overflow-wrap: normal;
                                            word-break: normal;
                                            line-height: 1.2;
                                        "
                                    >
                                        {RIGHTS}
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <!--
                          Compact product attribution retained from the
                          existing template.
                        -->
                        <div
                            style="
                                margin: 6px 0 0 0;
                                font-size: 9pt;
                                font-style: italic;
                                line-height: 1.25;
                            "
                        >
                            Shared via
                            <a
                                href="https://nextcloud.com/"
                                style="color: #0082c9; text-decoration: none"
                                >Nextcloud</a
                            >.
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

---

The previous layout could render inconsistently in Outlook Classic: permission labels were not always aligned correctly, and the bordered check/cross icons could stretch vertically instead of remaining square.

To fix this I had to touch the HTML generator of the connectors.
See:

• Fix Rights icons and non-breaking FileLink values in Outlook Classic NC_Connector_for_Outlook#28
• Fix Rights row rendering across email clients NC_Connector_for_Thunderbird#50

Key changes

• It was not properly resizing which broke the new responsive layout. I also noticed that your original template does not render correctly in Outlook Classic (which uses the Word HTML engine which introduces too many HTML and CSS quirks. So, the latest HTML/CSS addresses the odd Outlook Classic rendering engine which required the final markup to appear overly complex in some areas. This was required to allow Outlook Classic to arrange the layout correctly.

• The Unicode checkboxes

  • and their associated labels collapsed the padding in Outlook Classic (see your originally posted image below)
  • are vertically stretched/distorted which looks cosmetically unclean (see your originally posted image below)
  

The rights table was also not correctly aligned in the hosting table cell.

Changes

• Replace the previous Rights layout with Outlook-safe presentation tables.
• Keep all permission entries on one horizontal row.
• Vertically center permission icons and labels.
• Render each check/cross inside a dedicated fixed 14×14 icon table so the border remains square.
• Preserve permission order, labels, colors, symbols, localization, and HTML escaping.
• Avoid flexbox, CSS grid, and Outlook-specific sanitizer changes.
• Extend the focused rendering tests to validate the complete table hierarchy and icon dimensions.
  The changes exclusive are related to the HTML generator with the goal

Validation

Automated tests cover:

• all permissions enabled;
• all permissions disabled;
• mixed permission states;
• read-only shares;
• long localized labels;
• HTML escaping;
• custom-template rendering;
• permission ordering and spacing;
• absence of flexbox, grid, and unsupported MSO styles.

The generated share block was also manually verified in:

• Thunderbird;

• new Outlook;

• Outlook Classic.

[BionicCode]

I will create new issues to address the remaining template related issues:

• Outlook Classic table header color mismatch Use a transparent branding asset for Outlook-safe share headers #15
• New placeholder {LINK_CTA} to dynamically inject the

[DeBaschdi]

done

[BionicCode]

Perfect. You've been really busy. Thank you so much.