update: empty cell count on bigger device.

fix: query limit on fetching relationship items.
fix: show no items when load returns 0 items for relationships.

Author: ItzNotABug

package.json

@@ -24,9 +24,9 @@
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7747562",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@4a33959",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f2198f1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@4a33959",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f2198f1",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",

pnpm-lock.yaml

@@ -8,7 +8,7 @@
         Typography
     } from '@appwrite.io/pink-svelte';
     import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import { SortButton } from '$lib/components';
     import type { Column } from '$lib/helpers/types';
     import {
@@ -156,7 +156,7 @@
 
     const spreadsheetColumns = $derived(mode === 'rows' ? getRowColumns() : getIndexesColumns());
 
-    const emptyCells = $derived(($isSmallViewport ? 14 : 17) + (!$expandTabs ? 2 : 0));
+    const emptyCells = $derived(($isSmallViewport ? 14 : $isTabletViewport ? 17 : 24) + (!$expandTabs ? 2 : 0));
 </script>
 
 <div

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte

@@ -87,7 +87,7 @@
                 databaseId,
                 tableId: column.relatedTable,
                 // limit `5` as `25` would look too much on sheet!
-                queries: [Query.select(displayNames), Query.limit(2)]
+                queries: [Query.select(displayNames), Query.limit(5)]
             });
 
         cachedRowsCopyList = rows;
@@ -370,6 +370,7 @@
                 <!-- Input for adding new items -->
                 {#if showInput}
                     {@const availableOptions = getAvailableOptions()}
+                    {@const noAvailableOptions = availableOptions.length <= 0}
                     {#key availableOptions}
                         <Layout.Stack direction="row">
                             <Input.ComboBox
@@ -378,7 +379,10 @@
                                 on:change={addNewItem}
                                 bind:value={newItemValue}
                                 options={availableOptions}
-                                placeholder={`Select ${column.key}`}
+                                disabled={noAvailableOptions}
+                                placeholder={noAvailableOptions
+                                    ? 'No related items available'
+                                    : `Select ${column.key}`}
                                 noResultsOption={searchNoResultsOption}
                                 leadingIcon={!limited ? IconRelationship : undefined} />
 
@@ -433,14 +437,16 @@
                     }}
                     leadingIcon={!limited ? IconRelationship : undefined} />
             {:else}
+                {@const noOptions = options.length <= 0}
                 <Input.ComboBox
                     {id}
                     {options}
                     autofocus={limited}
                     bind:value={newItemValue}
                     required={column.required}
                     label={limited ? undefined : label}
-                    placeholder={`Select ${column.key}`}
+                    disabled={noOptions}
+                    placeholder={noOptions ? 'No related items available' : `Select ${column.key}`}
                     noResultsOption={searchNoResultsOption}
                     on:change={() => {
                         if (newItemValue === null) {

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/columns/types/relationship.svelte

@@ -82,7 +82,7 @@
     } from '@appwrite.io/pink-icons-svelte';
     import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
     import SheetOptions from './sheetOptions.svelte';
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import SpreadsheetContainer from './layout/spreadsheet.svelte';
     import EditRowCell from './rows/cell/edit.svelte';
     import { copy } from '$lib/helpers/copy';
@@ -111,7 +111,7 @@
     const organizationId = data.organization.$id ?? data.project.teamId;
 
     const minimumWidth = 168;
-    const emptyCellsLimit = $isSmallViewport ? 12 : 18;
+    const emptyCellsLimit = $spreadsheetLoading ? 30 : $isSmallViewport ? 12 : $isTabletViewport ? 18 : 24;
 
     let selectedRows = [];
     let spreadsheetContainer: SpreadsheetContainer;