Use border-box everywhere and use svelte loop keying

svelte/src/admin_panel/AbuseReporters.svelte

@@ -144,7 +144,7 @@ onMount(get_reporters);
 				<td>Created</td>
 				<td></td>
 			</tr>
-			{#each reporters as reporter}
+			{#each reporters as reporter (reporter.email)}
 				<tr>
 					<td>{reporter.email}</td>
 					<td>{reporter.name}</td>

svelte/src/admin_panel/AbuseReports.svelte

@@ -109,14 +109,14 @@ onMount(() => {
 		</div>
 
 		<h2>Pending</h2>
-		{#each reports_pending as report}
+		{#each reports_pending as report (report.id)}
 			{#if report.status === "pending"}
 			<AbuseReport report={report} on:refresh={get_reports}/>
 			{/if}
 		{/each}
 
 		<h2>Resolved</h2>
-		{#each reports_processed as report}
+		{#each reports_processed as report (report.id)}
 			{#if report.status !== "pending"}
 			<AbuseReport report={report} on:refresh={get_reports}/>
 			{/if}

svelte/src/admin_panel/IPBans.svelte

@@ -149,7 +149,7 @@ onMount(get_bans);
 				<td>Offences</td>
 				<td></td>
 			</tr>
-			{#each rows as row}
+			{#each rows as row (row.address)}
 				<tr>
 					<td>{row.address}</td>
 					<td>{row.reason}</td>

svelte/src/file_viewer/GalleryView.svelte

@@ -110,7 +110,7 @@ const drop = (e, index) => {
 </script>
 
 <div class="gallery">
-	{#each list.files as file, index (file)}
+	{#each list.files as file, index (file.id)}
 		<div
 			class="file"
 			on:click={() => {click_file(index)}}
@@ -148,16 +148,14 @@ const drop = (e, index) => {
 <style>
 .gallery{
 	padding: 16px;
-	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
 	overflow: auto;
 }
 .file{
 	position: relative;
-	box-sizing: border-box;
 	width: 200px;
-	max-width: 40%;
+	max-width: 45%;
 	height: 200px;
 	margin: 8px;
 	padding: 0;

svelte/src/file_viewer/viewers/Text.svelte

@@ -115,7 +115,6 @@ const code = () => {
 	font-size: 0.9em;
 	line-height: 1.5em;
 	padding: 5px 5px 5px 20px;
-	box-sizing: border-box;
 	overflow-y: scroll;
 	overflow-x: hidden;
 }

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -215,7 +215,6 @@ const toggle_select = () => {
 	width: 100%;
 	margin: 16px 0 0 0;
 	padding: 0;
-	box-sizing: border-box;
 	justify-content: center;
 }
 .toolbar > * { flex: 0 0 auto; }
@@ -237,7 +236,6 @@ const toggle_select = () => {
 	text-align: left;
 	background-color: var(--layer_1_color);
 	box-shadow: 1px 1px 5px var(--shadow_color);
-	box-sizing: border-box;
 	border-collapse: collapse;
 }
 .directory > * { display: table-row; }
@@ -247,7 +245,6 @@ const toggle_select = () => {
 	text-decoration: none;
 	color: var(--text-color);
 	padding: 6px;
-	box-sizing: border-box;
 }
 .directory :global(.node:not(:last-child)) {
 	border-bottom: 1px solid var(--layer_2_color);

svelte/src/home_page/HomePage.svelte

@@ -564,7 +564,6 @@ const keydown = (e) => {
 .instruction {
 	border-top: 1px solid var(--layer_2_color_border);
 	border-bottom: 1px solid var(--layer_2_color_border);
-	box-sizing: border-box;
 	margin: 1.5em 0;
 	padding: 5px;
 }
@@ -574,7 +573,6 @@ const keydown = (e) => {
 	line-height: 1em;
 	text-align: center;
 	display: inline-block;
-	box-sizing: border-box;
 	background-color: var(--highlight_color);
 	color: var(--highlight_text_color);
 	border-radius: 30px;
@@ -588,7 +586,6 @@ const keydown = (e) => {
 	margin: 0.1em;
 	font-size: 1.5em;
 	display: inline;
-	box-sizing: border-box;
 	vertical-align: middle;
 }
 .stats_box {

svelte/src/home_page/UploadProgressBar.svelte

@@ -235,7 +235,6 @@ const add_upload_history = id => {
 
 .upload_task{
 	position: relative;
-	box-sizing: border-box;
 	width: 440px;
 	max-width: 95%;
 	height: 4em;

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -353,7 +353,6 @@ const node_click = (index) => {
 	display: inline-block;
 	margin: 4px 10px;
 	padding: 4px;
-	box-sizing: border-box;
 	border-bottom: 1px solid var(--input_color);
 	cursor: pointer;
 }
@@ -375,12 +374,8 @@ const node_click = (index) => {
 	padding: 0;
 	overflow-x: auto;
 	text-align: left;
-	box-sizing: border-box;
 }
 #node_container {
-	/* Required because we use padding for moving the nodes down when items
-	above are out of view*/
-	box-sizing: border-box;
 	display: block;
 	min-width: 850px;
 }
@@ -402,7 +397,6 @@ const node_click = (index) => {
 	control over the size.
 	Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
 	margin: 0;
-	box-sizing: border-box;
 	color: var(--text_color);
 	text-decoration: none;
 }
@@ -420,14 +414,12 @@ const node_click = (index) => {
 	overflow: hidden;
 	margin: auto 10px;
 	padding: 4px;
-	box-sizing: border-box;
 	display: inline-block;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 .node > div > span {
 	margin: auto;
-	box-sizing: border-box;
 	display: block;
 	text-overflow: ellipsis;
 	white-space: nowrap;

svelte/src/user_home/APIKeys.svelte

@@ -121,7 +121,7 @@ const logout = async (key) => {
 				<td>IP address</td>
 				<td></td>
 			</tr>
-			{#each rows as row}
+			{#each rows as row (row.auth_key)}
 				<tr style="border-bottom: none;">
 					<td>{row.auth_key}</td>
 					<td>{formatDate(row.creation_time, true, true, false)}</td>

svelte/src/util/Modal.svelte

@@ -84,7 +84,6 @@ const keydown = e => {
 	padding: 0;
 	border-radius: 20px 20px 8px 8px;
 	overflow: hidden;
-	box-sizing: border-box;
 	text-align: left;
 	box-shadow: var(--shadow_color) 0px 0px 50px;
 }