fix: Always place the copy icon on the right side on mobile

Author: MoritzWeber0

assets/sass/anchorlink.scss

@@ -1,10 +1,20 @@
 .a-anchorlink {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  margin-bottom: 1.2rem;
+  align-items: center;
+  column-gap: .8rem;
+
+  @media (max-width: #{$breakpoint-md}) {
+    justify-content: space-between;
+  }
+}
+
+.a-anchorlink > h2 {
+  margin-bottom: 0;
 }
 
-.a-anchorlink::before {
-  content: "";
+.o-divider {
   display: block;
   width: 100%;
   margin: 2rem 0;
@@ -21,7 +31,6 @@
   height: 3.2rem;
   align-items: center;
   justify-content: center;
-  margin-left: .8rem;
   border-radius: var(--border-radius-s);
   opacity: .8;
   text-decoration: none;

assets/sass/styles.scss

@@ -163,6 +163,7 @@ img {
   justify-content: space-between;
   flex-flow: wrap;
   column-gap: 2rem;
+  row-gap: 1rem;
   margin-bottom: 1.6rem;
   align-items: center;
 

layouts/country/single.html

@@ -17,9 +17,7 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
             </div>
 
             <div data-pagefind-weight="2">
-                {{- with .Content -}}
-                    {{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "anchorLink.copy") `">` (partial "icon" "link") `</a></span>`) | safeHTML }}
-                {{- end -}}
+                {{ partial "content" . }}
             </div>
         </div>
         <div class="o-single__container">

layouts/operator/single.html

@@ -16,9 +16,7 @@ <h1 data-pagefind-meta="title">{{ .Title }}</h1>
                     {{ partial "updateDate.html" . }}
                 </div>
                 <div data-pagefind-weight="2.5">
-                    {{- with .Content -}}
-                        {{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "copyAnchorLink") `">` (partial "icon" "link") `</a></span>`) | safeHTML }}
-                    {{- end -}}
+                    {{ partial "content" . }}
                 </div>
             </div>
             {{ partial "image" (partial "helper/contentImage" . ) }}

layouts/partials/content.html

@@ -0,0 +1,3 @@
+{{- with .Content -}}
+    {{ . | replaceRE "(<h[2] id=\"([^\"]+)\".+)(</h[2]+>)" (print `<span class="o-divider"></span><span class="a-anchorlink">${1}${3}<a href="#${2}" class="a-anchorlink__link" title="` (T "anchorLink.copy") `">` (partial "icon" "link") `</a></span>`) | safeHTML }}
+{{- end -}}