Fix FPS limiter cards

Author: WallSoGB

css/flip.css

@@ -8,7 +8,7 @@ button,
   border-radius: 3px;
   padding: 0.4em;
   text-align: center;
-  font-size: 0.8em;
+  font-size: 1.1em;
   transition: all 187ms Cubic-Bezier(0, 0, 0, 1);
 }
 
@@ -43,7 +43,6 @@ button:active,
   max-width: 8em;
   min-height: 1em;
   width: 100%;
-  font-size: 1.1em;
   transition: all 187ms Cubic-Bezier(0, 0, 0, 1);
 }
 

css/styles.css

@@ -211,6 +211,11 @@ footer {
   max-width: 40% !important;
 }
 
+.width-auto {
+   width: fit-content !important;
+  -moz-width: fit-content !important;
+}
+
 textarea {
   padding: 1em !important;
   color: white;

falloutnv.html

@@ -1190,7 +1190,7 @@ <h4>Installation and configuration</h4>
                         <li>Set its <b>Application Detection Level</b> to <strong>Low</strong>.</li>
                         <li>Use the calculator below to determine your <strong>optimal FPS limit</strong><sup><a title="Warning" href="#annotation7">[7]</a></sup> setting. You can find your exact refresh rate <b><a href="https://www.testufo.com/refreshrate" target="_blank">here</a></b>.</li>
 
-                        <div class="card-basic">
+                        <div class="card width-auto">
                             <div class="center" style="margin: 10px;">
                                 <button id="fixedButton" onclick="setMode('fixed')" class="active">Fixed Refresh</button>
                                 <button id="vrrButton" onclick="setMode('vrr')">VRR</button>

js/fpsCalculator.js

@@ -57,7 +57,7 @@ function calculateFPS() {
 
     if (!rr || rr < 60) {
         results.innerHTML = `
-            <div class="card card-red">
+            <div class="card-red">
                 <p>Enter a valid refresh rate of 60Hz or higher.</p>
             </div>
         `;
@@ -70,16 +70,16 @@ function calculateFPS() {
         // clamp VRR upper recommendation to MAX_RECOMMENDED_FPS
         const rrVRRClamped = Math.min(rrVRR, MAX_RECOMMENDED_FPS);
         results.innerHTML = `
-            <div class="card card-basic">
+            <div class="card-basic">
                 <p>Recommended FPS Limit Range: Any value from 48* to ${rrVRRClamped}</p>
             </div>
-            <div class="card card-yellow">
+            <div class="card-yellow">
                 <p>
                     *Your VRR range typically starts at 48 FPS, but some displays support 30 or even 1.<br>
                     Check <a href="https://www.nvidia.com/en-us/geforce/products/g-sync-monitors/specs/" target="_blank">this list</a> to know your model's VRR range. Check the product page if it's not listed there.
                 </p>
             </div>
-            <div class="card card-green">
+            <div class="card-green">
                 <p>
                     Choose the highest value your system can maintain consistently.
                 </p>
@@ -96,7 +96,7 @@ function calculateFPS() {
         if (!commonRates.includes(rr) && rr > 75) {
             const better = findNearestRateWithGoodDivisor(rr);
             warning = `
-                <div class="card card-red">
+                <div class="card-red">
                     <p>
                         Your refresh rate (${rr}Hz) has divisors that make it suited for VRR more than fixed refresh.<br>
                         Look into enabling VRR if your display supports it. If not, consider switching to <b>${better}Hz</b> instead if you can't hold performance close to the suggested value - you can do this in the <b>Nvidia Control Panel</b> or <b>Adrenalin</b> settings.
@@ -106,16 +106,18 @@ function calculateFPS() {
         }
 
         results.innerHTML = `
-            <div class="card card-basic">
-                <p>Recommended FPS ${usableDivisors.length === 1 ? 'Limit' : 'Limits'}: ${recommendations} ${usableDivisors.length === 1 ? '' : '(choose one)'}</p>
+            <div class="card-basic">
+                <p>
+                    Recommended FPS ${usableDivisors.length === 1 ? 'Limit' : 'Limits'}: ${recommendations} ${usableDivisors.length === 1 ? '' : '(choose one)'}
+                </p>
             </div>
-            <div class="card card-red">
+            <div class="card-red">
                 <p>
                     Even with New Vegas Tick Fix, the game can still have issues at high framerates, the calculator already accounts for this and won't return any value higher than 120.
                 </p>
             </div>
             ${warning}
-            <div class="card card-green">
+            <div class="card-green">
                 <p>
                     Choose the highest value your system can maintain consistently.
                 </p>