Use the .sds-sectionItem__aboveClickArea class on items in columns that need to be interacted with. This lets them "float" over the js-sectionItem__toggle trigger element that covers the entirety of the section item.
<!-- Default -->
<div class="sds-box sds-sectionItem__detail">
<div class="sds-sectionItem__detailInner">
<div class="sds-sectionItem__innerCol -date">
<div class="sds-sectionItem__textMeta sds-textHelper">
18/03/2022
</div>
</div>
<div class="sds-sectionItem__innerCol -dot">
<div class="sds-sectionItem__dotWrapper">
<span class="sds-iconCircle -product -shopping" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingbag"></span>
</span>
</div>
</div>
<div class="sds-sectionItem__innerCol -justifyEnd -grow">
<div class="sds-btnGroup sds-sectionItem__aboveClickArea">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">
<span class="sds-icon sds-icon-hidden"></span>
</button>
</div>
</div>
<button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button">
<span class="sr-only">Close detail</span>
</button>
</div>
<div class="sds-sectionItem__detailContent">
<div class="h3">Domiciliation relevé Post Telecom Test 1</div>
<table class="sds-infoTable table">
<tbody>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Montant de la transaction
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -negative -amountXl">
<span class="sds-amount__value">-165</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Date de la transaction
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
30.09.2021
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Montant
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -negative">
<span class="sds-amount__value">-165</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Pays
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
Luxembourg
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Mouvements Compte -->
<div class="sds-box sds-sectionItem__detail">
<div class="sds-sectionItem__detailInner">
<div class="sds-sectionItem__innerCol -date">
<div class="sds-sectionItem__textMeta sds-textHelper">
{DD/MM/YYYY}
</div>
</div>
<div class="sds-sectionItem__innerCol -dot">
<div class="sds-sectionItem__dotWrapper">
<span class="sds-iconCircle -product -shopping" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingbag"></span>
</span>
</div>
</div>
<div class="sds-sectionItem__innerCol -justifyEnd -grow">
<div class="sds-btnGroup sds-sectionItem__aboveClickArea">
<a href="" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-document"></span>
<span class="sds-btn__text">Avis de débit</span>
</a>
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">
<span class="sds-icon sds-icon-hidden"></span>
</button>
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">
<span class="sds-icon sds-icon-compose"></span>
</button>
</div>
</div>
<button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button">
<span class="sr-only">Close detail</span>
</button>
</div>
<div class="sds-sectionItem__detailContent">
<div class="h3">Domiciliation relevé Post Telecom Test 1</div>
<table class="sds-infoTable table">
<tbody>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Montant de la transaction
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -negative -amountXl">
<span class="sds-amount__value">-165</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Date de la transaction
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
30.09.2021
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Montant
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -negative">
<span class="sds-amount__value">-165</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Pays
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
Luxembourg
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="sds-box -insetMd -elevated sds-staticStackMd sds-outOfBoundsMd">
<div class="sds-btnGroup d-flex justify-content-end">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-edit"></span>
<span class="sds-btn__text">Modifier</span>
</a>
<button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-toggle="tooltip" data-placement="top" data-title="Supprimer">
<span class="sds-icon sds-icon-trash"></span>
</button>
</div>
<div class="h4 d-flex align-items-center">
<span>Espace fiscal</span>
<a href="#!" tabindex="0" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
</a>
</div>
<div class="sds-staticExceptionStackLg">
<table class="sds-infoTable table">
<tbody>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Catégorie fiscale
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
DS - Dépenses Spéciales
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Année fiscale
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
2022
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Mouvements Compte Externe -->
<div class="sds-box sds-sectionItem__detail">
<div class="sds-sectionItem__detailInner">
<div class="sds-sectionItem__innerCol -date">
<div class="sds-sectionItem__textMeta sds-textHelper">
{DD.MM.YYYY}
</div>
</div>
<div class="sds-sectionItem__innerCol -dot">
<div class="sds-sectionItem__dotWrapper">
<span class="sds-iconCircle -product -shopping" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingbag"></span>
</span>
</div>
</div>
<div class="sds-sectionItem__innerCol -justifyEnd -grow">
<div class="sds-btnGroup sds-sectionItem__aboveClickArea">
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Imprimer">
<span class="sds-icon sds-icon-printer"></span>
</button>
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">
<span class="sds-icon sds-icon-hidden"></span>
</button>
<button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">
<span class="sds-icon sds-icon-compose"></span>
</button>
</div>
</div>
<button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button">
<span class="sr-only">Close detail</span>
</button>
</div>
<div class="sds-sectionItem__detailContent">
<div class="h3">Domiciliation relevé Post Telecom Test 1</div>
<table class="sds-infoTable table">
<tbody>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
{Label}
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-amount -negative -amountXl">
<span class="sds-amount__value">{- #.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
{Label}
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
{item}
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
{Label}
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div>
{item}
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Default -->
<div class="{{ namespace }}box {{ namespace }}sectionItem__detail">
<div class="{{ namespace }}sectionItem__detailInner">
<div class="{{ namespace }}sectionItem__innerCol -date">
<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
18/03/2022
</div>
</div>
<div class="{{ namespace }}sectionItem__innerCol -dot">
<div class="{{ namespace }}sectionItem__dotWrapper">
{% render "@icon-circle-mia"+product %}
</div>
</div>
<div class="{{ namespace }}sectionItem__innerCol -justifyEnd -grow">
<div class="{{ namespace }}btnGroup {{ namespace }}sectionItem__aboveClickArea">
{% render "@icon-btn-secondary",{
icon: "icon-hidden",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"data-title": "Exclure de l’analyse"
}
},true %}
</div>
</div>
<button class="{{ namespace }}sectionItem__toggle js-sectionItem__detailToggle" type="button" {% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
<span class="sr-only">Close detail</span>
</button>
</div>
<div class="{{ namespace }}sectionItem__detailContent">
<div class="h3">{{ communication }}</div>
{% render "@snet-info-table",infotableOptions,true %}
</div>
</div>
<!-- Mouvements Compte -->
<div class="{{ namespace }}box {{ namespace }}sectionItem__detail">
<div class="{{ namespace }}sectionItem__detailInner">
<div class="{{ namespace }}sectionItem__innerCol -date">
<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
{DD/MM/YYYY}
</div>
</div>
<div class="{{ namespace }}sectionItem__innerCol -dot">
<div class="{{ namespace }}sectionItem__dotWrapper">
{% if noCategory %}
{% render "@circle--default" %}
{% else %}
{% render "@icon-circle-mia"+product %}
{% endif %}
</div>
</div>
{% if noActions %}
{% else %}
<div class="{{ namespace }}sectionItem__innerCol -justifyEnd -grow">
<div class="{{ namespace }}btnGroup {{ namespace }}sectionItem__aboveClickArea">
{% render "@btn-secondary--icon-left",{
eltType: "a",
icon: "icon-document",
text:"Avis de débit"
},true %}
{% render "@icon-btn-secondary",{
icon: "icon-hidden",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"data-title": "Exclure de l’analyse"
}
},true %}
{% render "@icon-btn-secondary",{
icon: "icon-compose",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"data-title": "Signer"
}
},true %}
</div>
</div>
{% endif %}
<button class="{{ namespace }}sectionItem__toggle js-sectionItem__detailToggle" type="button" {% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
<span class="sr-only">Close detail</span>
</button>
</div>
<div class="{{ namespace }}sectionItem__detailContent">
{% if loading %}
{% for i in range(0,6) %}
{% render "@skeleton-unit" %}
{% endfor %}
{% else %}
<div class="h3">{{ communication }}</div>
{% render "@snet-info-table",infotableOptions,true %}
<div class="{{ namespace }}box -insetMd -elevated {{ namespace }}staticStackMd {{ namespace }}outOfBoundsMd">
<div class="{{ namespace }}btnGroup d-flex justify-content-end">
{% render "@btn-secondary-inverse--icon-left",{
eltType: "a",
icon: "icon-edit",
text:"Modifier"
},true %}
{% render "@icon-btn-secondary-inverse",{
icon: "icon-trash",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"data-title": "Supprimer"
}
},true %}
</div>
<div class="h4 d-flex align-items-center">
<span>Espace fiscal</span>
{% render "@info-dot" %}
</div>
<div class="{{ namespace }}staticExceptionStackLg">
{% render "@snet-info-table",espaceFiscalInfoTableOptions,true %}
</div>
</div>
{% endif %}
</div>
</div>
<!-- Mouvements Compte Externe -->
<div class="{{ namespace }}box {{ namespace }}sectionItem__detail">
<div class="{{ namespace }}sectionItem__detailInner">
<div class="{{ namespace }}sectionItem__innerCol -date">
<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
{DD.MM.YYYY}
</div>
</div>
<div class="{{ namespace }}sectionItem__innerCol -dot">
<div class="{{ namespace }}sectionItem__dotWrapper">
{% if noCategory %}
{% render "@circle--default" %}
{% else %}
{% render "@icon-circle-mia"+product %}
{% endif %}
</div>
</div>
{% if noActions %}
{% else %}
<div class="{{ namespace }}sectionItem__innerCol -justifyEnd -grow">
<div class="{{ namespace }}btnGroup {{ namespace }}sectionItem__aboveClickArea">
{% render "@icon-btn-secondary",{
icon: "icon-printer",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"data-title": "Imprimer"
}
},true %}
{% render "@icon-btn-secondary",{
icon: "icon-hidden",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"data-title": "Exclure de l’analyse"
}
},true %}
{% render "@icon-btn-secondary",{
icon: "icon-compose",
attrs: {
"data-toggle": "tooltip",
"data-placement": "top",
"data-title": "Signer"
}
},true %}
</div>
</div>
{% endif %}
<button class="{{ namespace }}sectionItem__toggle js-sectionItem__detailToggle" type="button" {% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
<span class="sr-only">Close detail</span>
</button>
</div>
<div class="{{ namespace }}sectionItem__detailContent">
{% if loading %}
{% for i in range(0,4) %}
{% render "@skeleton-unit" %}
{% endfor %}
{% else %}
<div class="h3">{{ communication }}</div>
{% render "@snet-info-table",infoTableOptions,true %}
{% endif %}
</div>
</div>