Merge pull request #772 from u01jmg3/10.0

[10.x] Ensure SVG icons are visible even with a long success or error message
laravel · Sep 4, 2019 · 63794c1 · 63794c1
2 parents 2fcdc0a + 9b1fb91
commit 63794c1
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/resources/views/payment.blade.php b/resources/views/payment.blade.php
@@ -16,7 +16,7 @@
         <div class="w-full max-w-lg">
             <!-- Status Messages -->
             <p class="flex items-center mb-4 bg-red-100 border border-red-200 px-5 py-2 rounded-lg text-red-500" v-if="errorMessage">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="flex-shrink-0 w-6 h-6">
                     <path class="fill-current text-red-300" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z"/>
                     <path class="fill-current text-red-500" d="M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm1-5.9c-.13 1.2-1.88 1.2-2 0l-.5-5a1 1 0 0 1 1-1.1h1a1 1 0 0 1 1 1.1l-.5 5z"/>
                 </svg>
@@ -25,7 +25,7 @@
             </p>
 
             <p class="flex items-center mb-4 bg-green-100 border border-green-200 px-5 py-4 rounded-lg text-green-700" v-if="paymentProcessed && successMessage">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="flex-shrink-0 w-6 h-6">
                     <circle cx="12" cy="12" r="10" class="fill-current text-green-300"/>
                     <path class="fill-current text-green-500" d="M10 14.59l6.3-6.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.42l2.3 2.3z"/>
                 </svg>