diff --git a/client/src/components/viewers/controls/FileControlsPagination.vue b/client/src/components/viewers/controls/FileControlsPagination.vue
index 4192a2c7bca..d1b1c0f75c1 100644
--- a/client/src/components/viewers/controls/FileControlsPagination.vue
+++ b/client/src/components/viewers/controls/FileControlsPagination.vue
@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 import { I18n } from 'megashark-lib';
-import { onUnmounted, ref, watch } from 'vue';
+import { onUnmounted, ref, watch, computed } from 'vue';
 import { FileControlsGroup, FileControlsInput } from '@/components/viewers';
 
 const props = defineProps<{
@@ -40,6 +40,9 @@ defineExpose({
 
 const inputRef = ref();
 const currentPage = ref('1');
+const inputLengthStyle = computed(() => {
+  return `${5 + props.length.toString().length * 1}rem`;
+});
 
 const pageWatchCancel = watch(
   () => props.page,
@@ -90,6 +93,6 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .page-number-input {
-  width: 6rem;
+  width: v-bind(inputLengthStyle);
 }
 </style>
diff --git a/client/src/parsec/file.ts b/client/src/parsec/file.ts
index 015baff763c..3811e31a876 100644
--- a/client/src/parsec/file.ts
+++ b/client/src/parsec/file.ts
@@ -311,7 +311,7 @@ export async function readFile(
   fd: FileDescriptor,
   offset: number,
   size: number,
-): Promise<Result<ArrayBuffer, WorkspaceFdReadError>> {
+): Promise<Result<Uint8Array, WorkspaceFdReadError>> {
   if (!needsMocks()) {
     return await libparsec.workspaceFdRead(workspaceHandle, fd, offset, size);
   } else {
@@ -325,29 +325,29 @@ export async function readFile(
 
     switch (ext) {
       case 'xlsx':
-        console.log('Using XLSX content');
-        return { ok: true, value: MockFiles.XLSX };
+        offset === 0 && console.log('Using XLSX content');
+        return { ok: true, value: MockFiles.XLSX.slice(offset, offset + size) };
       case 'png':
-        console.log('Using PNG content');
-        return { ok: true, value: MockFiles.PNG };
+        offset === 0 && console.log('Using PNG content');
+        return { ok: true, value: MockFiles.PNG.slice(offset, offset + size) };
       case 'docx':
-        console.log('Using DOCX content');
-        return { ok: true, value: MockFiles.DOCX };
+        offset === 0 && console.log('Using DOCX content');
+        return { ok: true, value: MockFiles.DOCX.slice(offset, offset + size) };
       case 'txt':
-        console.log('Using TXT content');
-        return { ok: true, value: MockFiles.TXT };
+        offset === 0 && console.log('Using TXT content');
+        return { ok: true, value: MockFiles.TXT.slice(offset, offset + size) };
       case 'py':
-        console.log('Using PY content');
-        return { ok: true, value: MockFiles.PY };
+        offset === 0 && console.log('Using PY content');
+        return { ok: true, value: MockFiles.PY.slice(offset, offset + size) };
       case 'pdf':
-        console.log('Using PDF content');
-        return { ok: true, value: MockFiles.PDF };
+        offset === 0 && console.log('Using PDF content');
+        return { ok: true, value: MockFiles.PDF.slice(offset, offset + size) };
       case 'mp3':
-        console.log('Using MP3 content');
-        return { ok: true, value: MockFiles.MP3 };
+        offset === 0 && console.log('Using MP3 content');
+        return { ok: true, value: MockFiles.MP3.slice(offset, offset + size) };
       case 'mp4':
-        console.log('Using MP4 content');
-        return { ok: true, value: MockFiles.MP4 };
+        offset === 0 && console.log('Using MP4 content');
+        return { ok: true, value: MockFiles.MP4.slice(offset, offset + size) };
     }
     console.log('Using default file content');
     return {