feat: Restyle using a proper container to group elements and not just put them in the heading

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -758,14 +758,19 @@ a.btn, a.btn2, a.nav-link {
 .adoption-card-report-link, .notification-card-mark-read {
     margin-left: auto;
     font-size: 2rem;
-    padding: 10px;
-    width: 15%;
 }
 
 .notification-card-mark-read {
     display: inline;
 }
 
+.inline-container {
+    display: inline-block;
+}
+.inline-container > *:first-child {
+    vertical-align:middle;
+}
+
 .heading-card-adoption-notice {
     word-wrap: anywhere;
     width: 80%;
@@ -783,7 +788,6 @@ a.btn, a.btn2, a.nav-link {
 }
 
 .detail-adoption-notice-header h1 {
-    width: 50%;
     display: inline-block;
 }
 

src/fellchensammlung/templates/fellchensammlung/details/detail_adoption_notice.html

@@ -6,7 +6,8 @@
 
 {% block content %}
     <div class="detail-adoption-notice-header">
-        <h1 class="detail-adoption-notice-header">{{ adoption_notice.name }}
+        <div class="inline-container">
+            <h1 class="detail-adoption-notice-header">{{ adoption_notice.name }}</h1>
             {% if not is_subscribed %}
                 <div class="tooltip bottom">
                     <form class="notification-card-mark-read" method="post">
@@ -27,7 +28,7 @@
                     <button class="btn2" type="submit" id="submit"><i class="fa-solid fa-bell-slash"></i></button>
                 </form>
             {% endif %}
-        </h1>
+        </div>
         {% if has_edit_permission %}
             <a class="btn2"
                href="{% url 'adoption-notice-add-photo' adoption_notice_id=adoption_notice.pk %}">{% translate 'Foto hinzufügen' %}</a>