fix(docs): provider support overflow

Author: sixlive

docs/components/ProviderSupport.vue

@@ -1,84 +1,86 @@
 <template>
   <div>
-    <table>
-      <thead>
-        <tr>
-          <th scope="col">Provider</th>
-          <th v-for="feature in features" :key="feature" scope="col">
-            {{ feature }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="provider in providers" :key="provider.name">
-          <th scope="row">{{ provider.name }}</th>
-          <td v-for="feature in features" :key="feature">
-            <div class="flex justify-center">
-              <svg
-                v-if="provider[feature.toLowerCase()] === 'supported'"
-                class="w-6 h-6"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M20 6L9 17L4 12"
-                  stroke="green"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-              <svg
-                v-else-if="provider[feature.toLowerCase()] === 'planned'"
-                class="w-6 h-6"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="12"
-                  cy="12"
-                  r="8"
-                  stroke="orange"
-                  stroke-width="2"
-                />
-              </svg>
-              <svg
-                v-else-if="provider[feature.toLowerCase()] === 'adapted'"
-                class="w-6 h-6"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 3v3m0 12v3M3 12h3m12 0h3"
-                  stroke="green"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                />
-                <circle cx="12" cy="12" r="4" stroke="green" stroke-width="2" />
-              </svg>
-              <svg
-                v-else
-                class="w-6 h-6"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M18 6L6 18M6 6l12 12"
-                  stroke="red"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div style="overflow-x: auto !important; display: block !important; width: 100% !important;">
+      <table style="width: 100% !important; min-width: 850px !important;">
+        <thead>
+          <tr>
+            <th scope="col">Provider</th>
+            <th v-for="feature in features" :key="feature" scope="col">
+              {{ feature }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="provider in providers" :key="provider.name">
+            <th scope="row">{{ provider.name }}</th>
+            <td v-for="feature in features" :key="feature">
+              <div class="flex justify-center">
+                <svg
+                  v-if="provider[feature.toLowerCase()] === 'supported'"
+                  class="w-6 h-6"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M20 6L9 17L4 12"
+                    stroke="green"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+                <svg
+                  v-else-if="provider[feature.toLowerCase()] === 'planned'"
+                  class="w-6 h-6"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="12"
+                    cy="12"
+                    r="8"
+                    stroke="orange"
+                    stroke-width="2"
+                  />
+                </svg>
+                <svg
+                  v-else-if="provider[feature.toLowerCase()] === 'adapted'"
+                  class="w-6 h-6"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 3v3m0 12v3M3 12h3m12 0h3"
+                    stroke="green"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                  />
+                  <circle cx="12" cy="12" r="4" stroke="green" stroke-width="2" />
+                </svg>
+                <svg
+                  v-else
+                  class="w-6 h-6"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M18 6L6 18M6 6l12 12"
+                    stroke="red"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
     <div class="flex gap-4 mt-4">
       <div class="flex items-center gap-2">
@@ -282,3 +284,14 @@ export default {
   },
 };
 </script>
+
+<style>
+.provider-table-wrapper {
+  overflow-x: auto;
+  width: 100%;
+}
+.provider-table {
+  min-width: 640px;
+  width: 100%;
+}
+</style>