fix: text properly centre aligned for large clap counts

The the text was larger than the container, it started to overflow to the right. This change ensures that it is always centred (unless > 1000px!)

fixes #17

src/applause-button.js

@@ -69,7 +69,9 @@ class ApplauseButton extends HTMLCustomElement {
     this.innerHTML = `
       <div class="style-root">
         <div class="shockwave"></div>
-        <div class="count"></div>
+        <div class="count-container">
+          <div class="count"></div>
+        </div>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
           <g class="flat">
             <path d="M57.0443547 6.86206897C57.6058817 6.46227795 57.7389459 5.67962382 57.3416215 5.11431557 56.9442971 4.54900731 56.1672933 4.41483804 55.6055588 4.81504702L52.4950525 7.030721C51.9335255 7.43051202 51.8004613 8.21316614 52.1977857 8.7784744 52.4404567 9.12371996 52.8251182 9.30825496 53.2153846 9.30825496 53.4640757 9.30825496 53.7152578 9.23343783 53.9338485 9.07753396L57.0443547 6.86206897zM48.8035059 6.1414838C48.94778 6.19623824 49.0959982 6.22215256 49.2415177 6.22215256 49.7455426 6.22215256 50.2198824 5.91201672 50.4075424 5.40898642L51.7485642 1.81818182C51.9906124 1.17011494 51.664906.447021944 51.0209664.203343783 50.3772345-.0405433647 49.6587706.287774295 49.4167224.93584117L48.0757006 4.52664577C47.83386 5.17471264 48.1595664 5.89780564 48.8035059 6.1414838zM58.5931726 11.6219436C58.5846615 11.6219436 58.5761504 11.6219436 58.5674317 11.6219436L54.7579749 11.6541275C54.0702341 11.6681296 53.5240687 12.1985371 53.5379772 12.8909091 53.551678 13.5745037 54.1065621 14.1297806 54.7828855 14.1297806 54.7913966 14.1297806 54.7999077 14.1297806 54.8086265 14.1297806L58.6180833 14.0643678C59.305824 14.0501567 59.8519894 13.4934169 59.838081 12.8010449 59.8243801 12.1174504 59.269496 11.6219436 58.5931726 11.6219436z"/>
@@ -141,7 +143,7 @@ class ApplauseButton extends HTMLCustomElement {
       this.classList.remove("loading");
       const clapCount = Number(claps);
       if (clapCount > 0) {
-        this._countElement.innerHTML = formatClaps(Number(claps));
+        this._countElement.innerHTML = formatClaps(clapCount);
       }
     });
 

src/applause-button.scss

@@ -25,7 +25,7 @@ applause-button {
 
   .style-root {
     @include position-fill();
-    
+
     &:after {
       @include position-fill();
       content: " ";
@@ -72,18 +72,22 @@ applause-button {
       g.outline {
         visibility: hidden;
       }
-    } 
+    }
   }
 
-
-
-  .count {
+  .count-container {
     position: absolute;
     top: -40%;
     width: 100%;
-    text-align: center;
     color: gray;
     user-select: none;
+
+    .count {
+      margin-left: 50%;
+      transform: translateX(-50%);
+      width: 1000px;
+      text-align: center;
+    }
   }
 
   g.sparkle {
@@ -117,7 +121,7 @@ applause-button {
     }
 
     @include animate-once(pulse);
-    
+
     .count {
       @include animate-once(hideThenShow);
     }