data-table: add data-table-container to overflow-x scroll, use it on relevant pages

src/assets/scss/data-table.scss

@@ -24,3 +24,8 @@
 		background-color: transparent;
 	}
 }
+
+.data-table-container {
+	overflow-x: auto;
+	max-width: 100%;
+}

src/assets/views/auth/account/account.svelte

@@ -41,6 +41,7 @@
         <section class="panel">
             <h2 id="emails"><i data-feather="shield"></i> Email addresses</h2>
 
+            <div class="data-table-container">
                 <table class="data-table">
                     <thead>
                     <tr>
@@ -84,6 +85,7 @@
                     {/each}
                     </tbody>
                 </table>
+            </div>
 
             <Form action={$locals.route('add-email')} class="sub-panel"
                   submitIcon="plus" submitText="Add email address">

src/assets/views/backend/accounts_approval.svelte

@@ -25,7 +25,7 @@
 
     <Pagination pagination={$locals.pagination} routeName="accounts-approval" contextSize="3" />
 
-    <div class="panel">
+    <div class="panel data-table-container">
         <table class="data-table">
             <thead>
             <tr>

test/assets/views/AllTests.svelte

@@ -14,7 +14,8 @@
 
 <div class="render-mode">{$locals.isPreRender ? 'SSR' : 'CSR'}</div>
 
-<table>
+<div class="data-table-container">
+    <table class="data-table">
         <thead>
         <tr>
             <th>Name</th>
@@ -27,3 +28,4 @@
         <LocalsTest/>
         </tbody>
     </table>
+</div>