Make the logs page bigger

apps/app-frontend/src/pages/instance/Index.vue

@@ -102,30 +102,28 @@
   <div class="px-6">
     <NavTabs :links="tabs" />
   </div>
-  <div class="p-6 pt-4">
-    <RouterView v-slot="{ Component }" :key="instance.path">
-      <template v-if="Component">
-        <Suspense
-          :key="instance.path"
-          @pending="loadingBar.startLoading()"
-          @resolve="loadingBar.stopLoading()"
-        >
-          <component
-            :is="Component"
-            :instance="instance"
-            :options="options"
-            :offline="offline"
-            :playing="playing"
-            :versions="modrinthVersions"
-            :installed="instance.install_stage !== 'installed'"
-          ></component>
-          <template #fallback>
-            <LoadingIndicator />
-          </template>
-        </Suspense>
-      </template>
-    </RouterView>
-  </div>
+  <RouterView v-slot="{ Component }" :key="instance.path">
+    <template v-if="Component">
+      <Suspense
+        :key="instance.path"
+        @pending="loadingBar.startLoading()"
+        @resolve="loadingBar.stopLoading()"
+      >
+        <component
+          :is="Component"
+          :instance="instance"
+          :options="options"
+          :offline="offline"
+          :playing="playing"
+          :versions="modrinthVersions"
+          :installed="instance.install_stage !== 'installed'"
+        ></component>
+        <template #fallback>
+          <LoadingIndicator />
+        </template>
+      </Suspense>
+    </template>
+  </RouterView>
   <ContextMenu ref="options" @option-clicked="handleOptionsClick">
     <template #play> <PlayIcon /> Play </template>
     <template #stop> <StopCircleIcon /> Stop </template>

apps/app-frontend/src/pages/instance/Logs.vue

@@ -76,15 +76,15 @@
         </div>
       </RecycleScroller>
     </div>
-    <ShareModalWrapper
-      ref="shareModal"
-      header="Share Log"
-      share-title="Instance Log"
-      share-text="Check out this log from an instance on the Modrinth App"
-      :open-in-new-tab="false"
-      link
-    />
   </Card>
+  <ShareModalWrapper
+    ref="shareModal"
+    header="Share Log"
+    share-title="Instance Log"
+    share-text="Check out this log from an instance on the Modrinth App"
+    :open-in-new-tab="false"
+    link
+  />
 </template>
 
 <script setup>
@@ -461,7 +461,8 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  height: calc(100vh - 11rem);
+  height: 110vh;
+  margin: 1rem 1.5rem 1rem 1.5rem;
 }
 
 .button-row {
@@ -484,7 +485,7 @@ onUnmounted(() => {
   background-color: var(--color-accent-contrast);
   color: var(--color-contrast);
   border-radius: var(--radius-lg);
-  padding: 1.5rem;
+  padding: 0.5rem;
   overflow-x: auto; /* Enables horizontal scrolling */
   overflow-y: hidden; /* Disables vertical scrolling on this wrapper */
   white-space: nowrap; /* Keeps content on a single line */

apps/app-frontend/src/pages/instance/Mods.vue

@@ -1,252 +1,254 @@
 <template>
-  <template v-if="projects?.length > 0">
-    <div class="flex items-center gap-2 mb-4">
-      <div class="iconified-input flex-grow">
-        <SearchIcon />
-        <input
-          v-model="searchFilter"
-          type="text"
-          :placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
-          class="text-input search-input"
-          autocomplete="off"
-        />
-        <Button class="r-btn" @click="() => (searchFilter = '')">
-          <XIcon />
-        </Button>
+  <div class="p-6 pt-4">
+    <template v-if="projects?.length > 0">
+      <div class="flex items-center gap-2 mb-4">
+        <div class="iconified-input flex-grow">
+          <SearchIcon />
+          <input
+            v-model="searchFilter"
+            type="text"
+            :placeholder="`Search ${filteredProjects.length} project${filteredProjects.length === 1 ? '' : 's'}...`"
+            class="text-input search-input"
+            autocomplete="off"
+          />
+          <Button class="r-btn" @click="() => (searchFilter = '')">
+            <XIcon />
+          </Button>
+        </div>
+        <AddContentButton :instance="instance" />
       </div>
-      <AddContentButton :instance="instance" />
-    </div>
-    <div class="flex items-center justify-between">
-      <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
-        <FilterIcon class="text-secondary h-5 w-5 mr-1" />
-        <button
-          v-for="filter in filterOptions"
-          :key="filter"
-          :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
-          @click="toggleArray(selectedFilters, filter.id)"
-        >
-          {{ filter.formattedName }}
-        </button>
+      <div class="flex items-center justify-between">
+        <div v-if="filterOptions.length > 1" class="flex flex-wrap gap-1 items-center pb-4">
+          <FilterIcon class="text-secondary h-5 w-5 mr-1" />
+          <button
+            v-for="filter in filterOptions"
+            :key="filter"
+            :class="`px-2 py-1 rounded-full font-semibold leading-none border-none cursor-pointer active:scale-[0.97] duration-100 transition-all ${selectedFilters.includes(filter.id) ? 'bg-brand-highlight text-brand' : 'bg-bg-raised text-secondary'}`"
+            @click="toggleArray(selectedFilters, filter.id)"
+          >
+            {{ filter.formattedName }}
+          </button>
+        </div>
+        <Pagination
+          v-if="search.length > 0"
+          :page="currentPage"
+          :count="Math.ceil(search.length / 20)"
+          :link-function="(page) => `?page=${page}`"
+          @switch-page="(page) => (currentPage = page)"
+        />
       </div>
-      <Pagination
-        v-if="search.length > 0"
-        :page="currentPage"
-        :count="Math.ceil(search.length / 20)"
-        :link-function="(page) => `?page=${page}`"
-        @switch-page="(page) => (currentPage = page)"
-      />
-    </div>
 
-    <ContentListPanel
-      v-model="selectedFiles"
-      :locked="isPackLocked"
-      :items="
-        search.map((x) => {
-          const item: ContentItem<any> = {
-            path: x.path,
-            disabled: x.disabled,
-            filename: x.file_name,
-            icon: x.icon,
-            title: x.name,
-            data: x,
-          }
-
-          if (x.version) {
-            item.version = x.version
-            item.versionId = x.version
-          }
-
-          if (x.id) {
-            item.project = {
-              id: x.id,
-              link: { path: `/project/${x.id}`, query: { i: props.instance.path } },
-              linkProps: {},
+      <ContentListPanel
+        v-model="selectedFiles"
+        :locked="isPackLocked"
+        :items="
+          search.map((x) => {
+            const item: ContentItem<any> = {
+              path: x.path,
+              disabled: x.disabled,
+              filename: x.file_name,
+              icon: x.icon,
+              title: x.name,
+              data: x,
+            }
+
+            if (x.version) {
+              item.version = x.version
+              item.versionId = x.version
             }
-          }
-
-          if (x.author) {
-            item.creator = {
-              name: x.author,
-              type: 'user',
-              id: x.author,
-              link: 'https://modrinth.com/user/' + x.author,
-              linkProps: { target: '_blank' },
+
+            if (x.id) {
+              item.project = {
+                id: x.id,
+                link: { path: `/project/${x.id}`, query: { i: props.instance.path } },
+                linkProps: {},
+              }
             }
-          }
 
-          return item
-        })
-      "
-      :sort-column="sortColumn"
-      :sort-ascending="ascending"
-      :update-sort="sortProjects"
-      :current-page="currentPage"
-    >
-      <template v-if="selectedProjects.length > 0" #headers>
-        <div class="flex gap-2">
+            if (x.author) {
+              item.creator = {
+                name: x.author,
+                type: 'user',
+                id: x.author,
+                link: 'https://modrinth.com/user/' + x.author,
+                linkProps: { target: '_blank' },
+              }
+            }
+
+            return item
+          })
+        "
+        :sort-column="sortColumn"
+        :sort-ascending="ascending"
+        :update-sort="sortProjects"
+        :current-page="currentPage"
+      >
+        <template v-if="selectedProjects.length > 0" #headers>
+          <div class="flex gap-2">
+            <ButtonStyled
+              v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
+              color="brand"
+              color-fill="text"
+              hover-color-fill="text"
+            >
+              <button @click="updateSelected()"><DownloadIcon /> Update</button>
+            </ButtonStyled>
+            <ButtonStyled>
+              <OverflowMenu
+                :options="[
+                  {
+                    id: 'share-names',
+                    action: () => shareNames(),
+                  },
+                  {
+                    id: 'share-file-names',
+                    action: () => shareFileNames(),
+                  },
+                  {
+                    id: 'share-urls',
+                    action: () => shareUrls(),
+                  },
+                  {
+                    id: 'share-markdown',
+                    action: () => shareMarkdown(),
+                  },
+                ]"
+              >
+                <ShareIcon /> Share <DropdownIcon />
+                <template #share-names> <TextInputIcon /> Project names </template>
+                <template #share-file-names> <FileIcon /> File names </template>
+                <template #share-urls> <LinkIcon /> Project links </template>
+                <template #share-markdown> <CodeIcon /> Markdown links </template>
+              </OverflowMenu>
+            </ButtonStyled>
+            <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
+              <button @click="enableAll()"><CheckCircleIcon /> Enable</button>
+            </ButtonStyled>
+            <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
+              <button @click="disableAll()"><SlashIcon /> Disable</button>
+            </ButtonStyled>
+            <ButtonStyled color="red">
+              <button @click="deleteSelected()"><TrashIcon /> Remove</button>
+            </ButtonStyled>
+          </div>
+        </template>
+        <template #header-actions>
+          <ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
+            <button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
+              <UpdatedIcon />
+              Refresh
+            </button>
+          </ButtonStyled>
+          <ButtonStyled
+            v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
+            type="transparent"
+            color="brand"
+            color-fill="text"
+            hover-color-fill="text"
+            @click="updateAll"
+          >
+            <button class="w-max"><DownloadIcon /> Update all</button>
+          </ButtonStyled>
           <ButtonStyled
-            v-if="!isPackLocked && selectedProjects.some((m) => m.outdated)"
+            v-if="canUpdatePack"
+            type="transparent"
             color="brand"
             color-fill="text"
             hover-color-fill="text"
           >
-            <button @click="updateSelected()"><DownloadIcon /> Update</button>
+            <button class="w-max" :disabled="installing" @click="modpackVersionModal.show()">
+              <DownloadIcon /> Update pack
+            </button>
           </ButtonStyled>
-          <ButtonStyled>
+        </template>
+        <template #actions="{ item }">
+          <ButtonStyled
+            v-if="!isPackLocked && (item.data as any).outdated"
+            type="transparent"
+            color="brand"
+            circular
+          >
+            <button
+              v-tooltip="`Update`"
+              :disabled="(item.data as any).updating"
+              @click="updateProject(item.data)"
+            >
+              <DownloadIcon />
+            </button>
+          </ButtonStyled>
+          <div v-else class="w-[36px]"></div>
+          <Toggle
+            class="!mx-2"
+            :model-value="!item.data.disabled"
+            :checked="!item.data.disabled"
+            @update:model-value="toggleDisableMod(item.data)"
+          />
+          <ButtonStyled type="transparent" circular>
+            <button v-tooltip="'Remove'" @click="removeMod(item)">
+              <TrashIcon />
+            </button>
+          </ButtonStyled>
+
+          <ButtonStyled type="transparent" circular>
             <OverflowMenu
               :options="[
                 {
-                  id: 'share-names',
-                  action: () => shareNames(),
-                },
-                {
-                  id: 'share-file-names',
-                  action: () => shareFileNames(),
-                },
-                {
-                  id: 'share-urls',
-                  action: () => shareUrls(),
+                  id: 'show-file',
+                  action: () => highlightModInProfile(instance.path, item.path),
                 },
                 {
-                  id: 'share-markdown',
-                  action: () => shareMarkdown(),
+                  id: 'copy-link',
+                  shown: item.data !== undefined && item.data.slug !== undefined,
+                  action: () => copyModLink(item),
                 },
               ]"
+              direction="left"
             >
-              <ShareIcon /> Share <DropdownIcon />
-              <template #share-names> <TextInputIcon /> Project names </template>
-              <template #share-file-names> <FileIcon /> File names </template>
-              <template #share-urls> <LinkIcon /> Project links </template>
-              <template #share-markdown> <CodeIcon /> Markdown links </template>
+              <MoreVerticalIcon />
+              <template #show-file> <ExternalIcon /> Show file </template>
+              <template #copy-link> <ClipboardCopyIcon /> Copy link </template>
             </OverflowMenu>
           </ButtonStyled>
-          <ButtonStyled v-if="selectedProjects.some((m) => m.disabled)">
-            <button @click="enableAll()"><CheckCircleIcon /> Enable</button>
-          </ButtonStyled>
-          <ButtonStyled v-if="selectedProjects.some((m) => !m.disabled)">
-            <button @click="disableAll()"><SlashIcon /> Disable</button>
-          </ButtonStyled>
-          <ButtonStyled color="red">
-            <button @click="deleteSelected()"><TrashIcon /> Remove</button>
-          </ButtonStyled>
-        </div>
-      </template>
-      <template #header-actions>
-        <ButtonStyled type="transparent" color-fill="text" hover-color-fill="text">
-          <button :disabled="refreshingProjects" class="w-max" @click="refreshProjects">
-            <UpdatedIcon />
-            Refresh
-          </button>
-        </ButtonStyled>
-        <ButtonStyled
-          v-if="!isPackLocked && projects.some((m) => (m as any).outdated)"
-          type="transparent"
-          color="brand"
-          color-fill="text"
-          hover-color-fill="text"
-          @click="updateAll"
-        >
-          <button class="w-max"><DownloadIcon /> Update all</button>
-        </ButtonStyled>
-        <ButtonStyled
-          v-if="canUpdatePack"
-          type="transparent"
-          color="brand"
-          color-fill="text"
-          hover-color-fill="text"
-        >
-          <button class="w-max" :disabled="installing" @click="modpackVersionModal.show()">
-            <DownloadIcon /> Update pack
-          </button>
-        </ButtonStyled>
-      </template>
-      <template #actions="{ item }">
-        <ButtonStyled
-          v-if="!isPackLocked && (item.data as any).outdated"
-          type="transparent"
-          color="brand"
-          circular
-        >
-          <button
-            v-tooltip="`Update`"
-            :disabled="(item.data as any).updating"
-            @click="updateProject(item.data)"
-          >
-            <DownloadIcon />
-          </button>
-        </ButtonStyled>
-        <div v-else class="w-[36px]"></div>
-        <Toggle
-          class="!mx-2"
-          :model-value="!item.data.disabled"
-          :checked="!item.data.disabled"
-          @update:model-value="toggleDisableMod(item.data)"
+        </template>
+      </ContentListPanel>
+      <div class="flex justify-end mt-4">
+        <Pagination
+          v-if="search.length > 0"
+          :page="currentPage"
+          :count="Math.ceil(search.length / 20)"
+          :link-function="(page) => `?page=${page}`"
+          @switch-page="(page) => (currentPage = page)"
         />
-        <ButtonStyled type="transparent" circular>
-          <button v-tooltip="'Remove'" @click="removeMod(item)">
-            <TrashIcon />
-          </button>
-        </ButtonStyled>
-
-        <ButtonStyled type="transparent" circular>
-          <OverflowMenu
-            :options="[
-              {
-                id: 'show-file',
-                action: () => highlightModInProfile(instance.path, item.path),
-              },
-              {
-                id: 'copy-link',
-                shown: item.data !== undefined && item.data.slug !== undefined,
-                action: () => copyModLink(item),
-              },
-            ]"
-            direction="left"
+      </div>
+    </template>
+    <div v-else class="w-full flex flex-col items-center justify-center mt-6 max-w-[48rem] mx-auto">
+      <div class="top-box w-full">
+        <div class="flex items-center gap-6 w-[32rem] mx-auto">
+          <img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
+          <span class="text-contrast font-bold text-xl"
+            >You haven't added any content to this instance yet.</span
           >
-            <MoreVerticalIcon />
-            <template #show-file> <ExternalIcon /> Show file </template>
-            <template #copy-link> <ClipboardCopyIcon /> Copy link </template>
-          </OverflowMenu>
-        </ButtonStyled>
-      </template>
-    </ContentListPanel>
-    <div class="flex justify-end mt-4">
-      <Pagination
-        v-if="search.length > 0"
-        :page="currentPage"
-        :count="Math.ceil(search.length / 20)"
-        :link-function="(page) => `?page=${page}`"
-        @switch-page="(page) => (currentPage = page)"
-      />
-    </div>
-  </template>
-  <div v-else class="w-full flex flex-col items-center justify-center mt-6 max-w-[48rem] mx-auto">
-    <div class="top-box w-full">
-      <div class="flex items-center gap-6 w-[32rem] mx-auto">
-        <img src="@/assets/sad-modrinth-bot.webp" class="h-24" />
-        <span class="text-contrast font-bold text-xl"
-          >You haven't added any content to this instance yet.</span
-        >
+        </div>
+      </div>
+      <div class="top-box-divider"></div>
+      <div class="flex items-center gap-6 py-4">
+        <AddContentButton :instance="instance" />
       </div>
     </div>
-    <div class="top-box-divider"></div>
-    <div class="flex items-center gap-6 py-4">
-      <AddContentButton :instance="instance" />
-    </div>
+    <ShareModalWrapper
+      ref="shareModal"
+      share-title="Sharing modpack content"
+      share-text="Check out the projects I'm using in my modpack!"
+      :open-in-new-tab="false"
+    />
+    <ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
+    <ModpackVersionModal
+      v-if="instance.linked_data"
+      ref="modpackVersionModal"
+      :instance="instance"
+      :versions="props.versions"
+    />
   </div>
-  <ShareModalWrapper
-    ref="shareModal"
-    share-title="Sharing modpack content"
-    share-text="Check out the projects I'm using in my modpack!"
-    :open-in-new-tab="false"
-  />
-  <ExportModal v-if="projects.length > 0" ref="exportModal" :instance="instance" />
-  <ModpackVersionModal
-    v-if="instance.linked_data"
-    ref="modpackVersionModal"
-    :instance="instance"
-    :versions="props.versions"
-  />
 </template>
 <script setup lang="ts">
 import {