layout for rendering list

src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss

@@ -1,5 +1,7 @@
 // Access to Bootstrap variables and mixins
 @import '~ChillMainAssets/module/bootstrap/shared';
+@import '~ChillPersonAssets/chill/scss/mixins.scss';
+@import 'bootstrap/scss/_badge.scss';
 
 //// ACTIVITY CREATION
 // first step: select type page
@@ -96,3 +98,25 @@ li.document-list-item {
     justify-content: space-between;
     margin-bottom: 0.3rem;
 }
+
+.badge-activity-type {
+    display: inline-block;
+    background-color: #f3f3f3;
+
+    .title_label {
+        @include chill_badge(#9acd32);
+    }
+
+    .title_action {
+        padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
+        margin-right: 1rem;
+
+        font-size: var(--bs-badge-font-size);
+        font-weight: var(--bs-badge-font-weight);
+        line-height: 1;
+        color: var(--bs-badge-color);
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: baseline;
+    }
+}

src/Bundle/ChillActivityBundle/Resources/views/GenericDoc/activity_document.html.twig

@@ -20,8 +20,25 @@
             {% elseif document.isFailure %}
                 <div class="badge text-bg-warning">{{ 'docgen.Doc generation failed'|trans }}</div>
             {% endif %}
+
+            <div>
+                {% if activity.accompanyingPeriod is not null and context == 'person' %}
+                    <span class="badge bg-primary">
+                        <i class="fa fa-random"></i> {{ activity.accompanyingPeriod.id }}
+                    </span>&nbsp;
+                {% endif %}
+                <div class="badge-activity-type">
+                    <span class="title_label"></span>
+                    <span class="title_action">
+                    {{ activity.type.name | localize_translatable_string }}
+                        {% if activity.emergency %}
+                            <span class="badge bg-danger rounded-pill fs-6 float-end">{{ 'Emergency'|trans|upper }}</span>
+                        {% endif %}
+                    </span>
+                </div>
+            </div>
             <div class="denomination h2">
-                {{ document.title }}
+                {{ document.title|chill_print_or_message("No title") }}
             </div>
             {% if document.hasTemplate %}
                 <div>
@@ -39,19 +56,6 @@
         </div>
     </div>
 
-    <div class="item-row separator">
-        <div class="item-col">
-            <h2 class="badge-title">
-                <span class="title_label"></span>
-                <span class="title_action">
-                    {{ activity.type.name | localize_translatable_string }}
-                    {% if activity.emergency %}
-                        <span class="badge bg-danger rounded-pill fs-6 float-end">{{ 'Emergency'|trans|upper }}</span>
-                    {% endif %}
-                </span>
-            </h2>
-        </div>
-    </div>
 
     <div class="item-row separator">
         <div class="item-col item-meta">