-
-
-
+
-
+
-
+
-
-
-
Something went wrong
-+
+ ). @screenly/edge-apps/styles goes in the `base` layer so any
+ Tailwind utility classes added later always win the cascade, regardless
+ of selector specificity. */
+@layer theme, base, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import '@screenly/edge-apps/styles' layer(base);
+@import 'tailwindcss/utilities.css' layer(utilities);
diff --git a/src/kanban.ts b/src/kanban.ts
index ab00d01..4b64603 100644
--- a/src/kanban.ts
+++ b/src/kanban.ts
@@ -15,12 +15,14 @@ function buildCard(
primaryField: AirtableField | undefined,
): HTMLDivElement {
const card = document.createElement('div')
- card.className = 'kanban-card'
+ card.className =
+ 'kanban-card flex flex-col gap-2 p-3 bg-white/[0.07] border border-white/10 rounded-[0.625rem]'
const primaryVal = record.fields[primaryField?.name ?? '']
if (primaryVal !== null && primaryVal !== undefined && primaryVal !== '') {
const cardTitle = document.createElement('p')
- cardTitle.className = 'kanban-card-title'
+ cardTitle.className =
+ 'kanban-card-title m-0 text-sm font-medium text-[#f2f2f3] leading-[1.4] break-words'
cardTitle.textContent = String(primaryVal)
card.appendChild(cardTitle)
}
@@ -33,18 +35,20 @@ function buildColumnHeader(
color: string | undefined,
): HTMLDivElement {
const header = document.createElement('div')
- header.className = 'kanban-column-header'
+ header.className =
+ 'kanban-column-header flex-shrink-0 flex items-center gap-2 py-3.5 px-4 border-b border-white/[0.08]'
if (color) {
const colors = AIRTABLE_COLORS[color] || PILL_FALLBACK
const dot = document.createElement('span')
- dot.className = 'kanban-column-dot'
+ dot.className = 'kanban-column-dot flex-shrink-0 w-2.5 h-2.5 rounded-full'
dot.style.backgroundColor = colors.bg
header.appendChild(dot)
}
const titleEl = document.createElement('span')
- titleEl.className = 'kanban-column-title'
+ titleEl.className =
+ 'kanban-column-title flex-1 text-xs font-semibold tracking-[0.07em] uppercase text-[#9d9d9f] whitespace-nowrap overflow-hidden text-ellipsis'
titleEl.textContent = name || 'No Status'
header.appendChild(titleEl)
@@ -58,11 +62,13 @@ function buildColumn(
primaryField: AirtableField | undefined,
): HTMLDivElement {
const column = document.createElement('div')
- column.className = 'kanban-column'
+ column.className =
+ 'kanban-column flex-[0_0_17rem] max-h-full flex flex-col bg-white/[0.06] border border-white/10 rounded-2xl overflow-hidden portrait:flex-[0_0_14rem]'
column.appendChild(buildColumnHeader(name, color))
const cardsEl = document.createElement('div')
- cardsEl.className = 'kanban-cards'
+ cardsEl.className =
+ 'kanban-cards flex-1 min-h-0 overflow-y-auto p-3 flex flex-col gap-2.5 [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/15 [&::-webkit-scrollbar-thumb]:rounded-2xl'
colRecords.forEach((record) => {
cardsEl.appendChild(buildCard(record, primaryField))
})
diff --git a/src/main.ts b/src/main.ts
index aaaec73..e47c3ad 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,4 @@
import './css/style.css'
-import './css/grid.css'
-import './css/kanban.css'
import '@screenly/edge-apps/components'
import {
getCredentials,
+
diff --git a/package.json b/package.json
index 92eb4b1..570aab8 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
"prettier": "./.prettierrc.json",
"devDependencies": {
"@playwright/test": "^1.59.1",
- "@screenly/edge-apps": "^1.2.1",
+ "@screenly/edge-apps": "^1.4.0",
"@types/bun": "^1.3.9",
"@types/jsdom": "^28.0.1",
"bun-types": "^1.3.9",
diff --git a/screenshots/grid-1080x1920.webp b/screenshots/grid-1080x1920.webp
index f0553ac..48b7bcb 100644
Binary files a/screenshots/grid-1080x1920.webp and b/screenshots/grid-1080x1920.webp differ
diff --git a/screenshots/grid-1280x720.webp b/screenshots/grid-1280x720.webp
index 220d957..fac24f3 100644
Binary files a/screenshots/grid-1280x720.webp and b/screenshots/grid-1280x720.webp differ
diff --git a/screenshots/grid-1920x1080.webp b/screenshots/grid-1920x1080.webp
index 1e44352..55522af 100644
Binary files a/screenshots/grid-1920x1080.webp and b/screenshots/grid-1920x1080.webp differ
diff --git a/screenshots/grid-2160x3840.webp b/screenshots/grid-2160x3840.webp
index 9374bd7..3dfa463 100644
Binary files a/screenshots/grid-2160x3840.webp and b/screenshots/grid-2160x3840.webp differ
diff --git a/screenshots/grid-2160x4096.webp b/screenshots/grid-2160x4096.webp
index 259c498..c1d7168 100644
Binary files a/screenshots/grid-2160x4096.webp and b/screenshots/grid-2160x4096.webp differ
diff --git a/screenshots/grid-3840x2160.webp b/screenshots/grid-3840x2160.webp
index b28df52..8671af0 100644
Binary files a/screenshots/grid-3840x2160.webp and b/screenshots/grid-3840x2160.webp differ
diff --git a/screenshots/grid-4096x2160.webp b/screenshots/grid-4096x2160.webp
index 4978575..0ddc281 100644
Binary files a/screenshots/grid-4096x2160.webp and b/screenshots/grid-4096x2160.webp differ
diff --git a/screenshots/grid-480x800.webp b/screenshots/grid-480x800.webp
index a71fb1e..704c7e1 100644
Binary files a/screenshots/grid-480x800.webp and b/screenshots/grid-480x800.webp differ
diff --git a/screenshots/grid-720x1280.webp b/screenshots/grid-720x1280.webp
index ef710d7..bafe06e 100644
Binary files a/screenshots/grid-720x1280.webp and b/screenshots/grid-720x1280.webp differ
diff --git a/screenshots/grid-800x480.webp b/screenshots/grid-800x480.webp
index ef2dc42..804df58 100644
Binary files a/screenshots/grid-800x480.webp and b/screenshots/grid-800x480.webp differ
diff --git a/screenshots/kanban-1080x1920.webp b/screenshots/kanban-1080x1920.webp
index 0ca9dd9..e8e91c1 100644
Binary files a/screenshots/kanban-1080x1920.webp and b/screenshots/kanban-1080x1920.webp differ
diff --git a/screenshots/kanban-1280x720.webp b/screenshots/kanban-1280x720.webp
index f5a6020..b43969e 100644
Binary files a/screenshots/kanban-1280x720.webp and b/screenshots/kanban-1280x720.webp differ
diff --git a/screenshots/kanban-1920x1080.webp b/screenshots/kanban-1920x1080.webp
index 72edfac..076b951 100644
Binary files a/screenshots/kanban-1920x1080.webp and b/screenshots/kanban-1920x1080.webp differ
diff --git a/screenshots/kanban-2160x3840.webp b/screenshots/kanban-2160x3840.webp
index 476c658..d2131a0 100644
Binary files a/screenshots/kanban-2160x3840.webp and b/screenshots/kanban-2160x3840.webp differ
diff --git a/screenshots/kanban-2160x4096.webp b/screenshots/kanban-2160x4096.webp
index 35c534d..109c07d 100644
Binary files a/screenshots/kanban-2160x4096.webp and b/screenshots/kanban-2160x4096.webp differ
diff --git a/screenshots/kanban-3840x2160.webp b/screenshots/kanban-3840x2160.webp
index 3e85a20..786b9e0 100644
Binary files a/screenshots/kanban-3840x2160.webp and b/screenshots/kanban-3840x2160.webp differ
diff --git a/screenshots/kanban-4096x2160.webp b/screenshots/kanban-4096x2160.webp
index 8e62b55..1d51ab4 100644
Binary files a/screenshots/kanban-4096x2160.webp and b/screenshots/kanban-4096x2160.webp differ
diff --git a/screenshots/kanban-480x800.webp b/screenshots/kanban-480x800.webp
index 44901d8..cbb7a8d 100644
Binary files a/screenshots/kanban-480x800.webp and b/screenshots/kanban-480x800.webp differ
diff --git a/screenshots/kanban-720x1280.webp b/screenshots/kanban-720x1280.webp
index ad2e540..b57d10d 100644
Binary files a/screenshots/kanban-720x1280.webp and b/screenshots/kanban-720x1280.webp differ
diff --git a/screenshots/kanban-800x480.webp b/screenshots/kanban-800x480.webp
index acd52bc..420ffe5 100644
Binary files a/screenshots/kanban-800x480.webp and b/screenshots/kanban-800x480.webp differ
diff --git a/src/app.ts b/src/app.ts
index 44252ea..98ae10a 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -73,10 +73,11 @@ export function createErrorReporter(displayErrors: boolean): ErrorReporter {
export function createPillsContainer(pills: Pill[]): HTMLDivElement {
const container = document.createElement('div')
- container.className = 'cell-pills'
+ container.className = 'cell-pills flex flex-nowrap gap-1 items-center'
pills.forEach((pill) => {
const span = document.createElement('span')
- span.className = 'pill'
+ span.className =
+ 'pill inline-flex items-center px-[0.6rem] py-[0.2rem] rounded-2xl text-xs font-medium whitespace-nowrap'
span.textContent = pill.label
const colors = (pill.color && AIRTABLE_COLORS[pill.color]) || PILL_FALLBACK
span.style.backgroundColor = colors.bg
@@ -101,8 +102,12 @@ export function renderTable(headers: string[], rows: CellValue[][]): void {
}
const headerRow = document.createElement('tr')
+ headerRow.className =
+ 'bg-[linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15))] bg-[length:calc(100%-4rem)_1px] bg-center bg-no-repeat'
headers.forEach((header) => {
const th = document.createElement('th')
+ th.className =
+ 'text-left py-5 px-8 text-xs font-semibold tracking-[0.08em] uppercase text-[#9d9d9f] whitespace-nowrap portrait:py-4 portrait:px-5 portrait:text-[0.7rem]'
th.textContent = header
headerRow.appendChild(th)
})
@@ -110,8 +115,12 @@ export function renderTable(headers: string[], rows: CellValue[][]): void {
rows.forEach((row) => {
const tr = document.createElement('tr')
+ tr.className =
+ '[&:not(:last-child)]:bg-[linear-gradient(rgba(255,255,255,0.15),rgba(255,255,255,0.15))] [&:not(:last-child)]:bg-[length:calc(100%-4rem)_1px] [&:not(:last-child)]:bg-center [&:not(:last-child)]:bg-no-repeat'
row.forEach((cell) => {
const td = document.createElement('td')
+ td.className =
+ 'py-[1.125rem] px-8 text-lg font-normal text-[#dadadb] whitespace-nowrap align-middle portrait:py-[0.875rem] portrait:px-5 portrait:text-base'
if (typeof cell === 'string') {
td.textContent = cell
} else {
diff --git a/src/css/grid.css b/src/css/grid.css
deleted file mode 100644
index 5d7b850..0000000
--- a/src/css/grid.css
+++ /dev/null
@@ -1,71 +0,0 @@
-.table-card {
- background: rgba(255, 255, 255, 0.08);
- border: 1px solid rgba(255, 255, 255, 0.12);
- border-radius: 1.5rem;
- overflow: hidden;
- backdrop-filter: blur(20px);
- box-shadow:
- 0 1.25rem 3rem rgba(0, 0, 0, 0.4),
- 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
-}
-
-#data-table {
- width: 100%;
- border-collapse: collapse;
-}
-
-#data-table thead tr {
- background-image: linear-gradient(
- rgba(255, 255, 255, 0.15),
- rgba(255, 255, 255, 0.15)
- );
- background-size: calc(100% - 4rem) 1px;
- background-position: center bottom;
- background-repeat: no-repeat;
-}
-
-#data-table th {
- padding: 1.25rem 2rem;
- text-align: left;
- font-size: 0.75rem;
- font-weight: 600;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--color-text-muted);
- white-space: nowrap;
-}
-
-#data-table td {
- padding: 1.125rem 2rem;
- font-size: 1.125rem;
- font-weight: 400;
- color: var(--color-text-secondary);
- white-space: nowrap;
- vertical-align: middle;
-}
-
-#data-table tbody tr {
- background-image: linear-gradient(
- rgba(255, 255, 255, 0.15),
- rgba(255, 255, 255, 0.15)
- );
- background-size: calc(100% - 4rem) 1px;
- background-position: center bottom;
- background-repeat: no-repeat;
-}
-
-#data-table tbody tr:last-child {
- background-image: none;
-}
-
-@media (orientation: portrait) {
- #data-table th {
- padding: 1rem 1.25rem;
- font-size: 0.7rem;
- }
-
- #data-table td {
- padding: 0.875rem 1.25rem;
- font-size: 1rem;
- }
-}
diff --git a/src/css/kanban.css b/src/css/kanban.css
deleted file mode 100644
index 9181093..0000000
--- a/src/css/kanban.css
+++ /dev/null
@@ -1,145 +0,0 @@
-#kanban-container {
- flex: 1;
- min-height: 0;
- overflow: hidden;
-}
-
-#kanban-board {
- display: flex;
- gap: 1.25rem;
- height: 100%;
- overflow-x: auto;
- overflow-y: hidden;
- align-items: flex-start;
- padding-bottom: 0.5rem;
-}
-
-#kanban-board::-webkit-scrollbar {
- height: 0.375rem;
-}
-
-#kanban-board::-webkit-scrollbar-track {
- background: transparent;
-}
-
-#kanban-board::-webkit-scrollbar-thumb {
- background: rgba(255, 255, 255, 0.2);
- border-radius: 1rem;
-}
-
-.kanban-column {
- flex: 0 0 17rem;
- max-height: 100%;
- display: flex;
- flex-direction: column;
- background: rgba(255, 255, 255, 0.06);
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 1rem;
- overflow: hidden;
-}
-
-.kanban-column-header {
- flex-shrink: 0;
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.875rem 1rem;
- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.kanban-column-dot {
- flex-shrink: 0;
- width: 0.625rem;
- height: 0.625rem;
- border-radius: 50%;
-}
-
-.kanban-column-title {
- flex: 1;
- font-size: 0.75rem;
- font-weight: 600;
- letter-spacing: 0.07em;
- text-transform: uppercase;
- color: var(--color-text-muted);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.kanban-column-count {
- flex-shrink: 0;
- font-size: 0.7rem;
- font-weight: 500;
- color: var(--color-text-muted);
- background: rgba(255, 255, 255, 0.1);
- padding: 0.1rem 0.45rem;
- border-radius: 1rem;
-}
-
-.kanban-cards {
- flex: 1;
- min-height: 0;
- overflow-y: auto;
- padding: 0.75rem;
- display: flex;
- flex-direction: column;
- gap: 0.625rem;
-}
-
-.kanban-cards::-webkit-scrollbar {
- width: 0.25rem;
-}
-
-.kanban-cards::-webkit-scrollbar-track {
- background: transparent;
-}
-
-.kanban-cards::-webkit-scrollbar-thumb {
- background: rgba(255, 255, 255, 0.15);
- border-radius: 1rem;
-}
-
-.kanban-card {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- padding: 0.75rem;
- background: rgba(255, 255, 255, 0.07);
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 0.625rem;
-}
-
-.kanban-card-title {
- margin: 0;
- font-size: 0.875rem;
- font-weight: 500;
- color: var(--color-text-primary);
- line-height: 1.4;
- word-break: break-word;
-}
-
-.kanban-card-field {
- display: flex;
- flex-direction: column;
- gap: 0.2rem;
-}
-
-.kanban-card-field-label {
- font-size: 0.65rem;
- font-weight: 600;
- letter-spacing: 0.06em;
- text-transform: uppercase;
- color: var(--color-text-muted);
-}
-
-.kanban-card-field-value {
- font-size: 0.75rem;
- color: var(--color-text-secondary);
- word-break: break-word;
-}
-
-@media (orientation: portrait) {
- .kanban-column {
- flex: 0 0 14rem;
- }
-}
diff --git a/src/css/style.css b/src/css/style.css
index 7e37d9b..ea94d3b 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,206 +1,10 @@
-@import '@screenly/edge-apps/styles';
-
-:root {
- --color-surface-low: #08080d;
- --color-text-primary: #f2f2f3;
- --color-text-secondary: #dadadb;
- --color-text-muted: #9d9d9f;
- --color-error: #ff6b6b;
- --color-error-bg: rgba(255, 80, 80, 0.08);
- --color-error-border: rgba(255, 80, 80, 0.2);
- --card-radius: 1.5rem;
-}
-
-* {
- box-sizing: border-box;
-}
-
-body {
- margin: 0;
- padding: 0;
- overflow: hidden;
- color: var(--color-text-primary);
- font-family: 'Inter', system-ui, sans-serif;
- background: url('/static/images/bg.webp') no-repeat center center;
- background-size: cover;
- background-color: var(--color-surface-low);
-}
-
-body::before {
- content: '';
- position: fixed;
- inset: 0;
- z-index: var(--z-index-backdrop);
- pointer-events: none;
- background: rgba(0, 0, 0, 0.45);
- backdrop-filter: blur(7px);
-}
-
-auto-scaler {
- position: relative;
- z-index: var(--z-index-content);
-}
-
-#app {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
-}
-
-.header {
- flex-shrink: 0;
- background: rgba(255, 255, 255, 0.08);
- border: 1px solid rgba(255, 255, 255, 0.12);
- box-shadow:
- 0 1.25rem 3rem rgba(0, 0, 0, 0.4),
- 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
-}
-
-.content {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: flex-start;
- padding: 2rem 3rem;
- min-height: 0;
- overflow: hidden;
-}
-
-#table-wrapper {
- width: 100%;
- max-width: 100rem;
- max-height: 100%;
- display: flex;
- flex-direction: column;
- gap: 3rem;
- min-height: 0;
-}
-
-#table-title {
- font-size: 2rem;
- font-weight: 600;
- color: var(--color-text-primary);
- margin: 0;
- letter-spacing: -0.03em;
- text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
- flex-shrink: 0;
-}
-
-.cell-pills {
- display: flex;
- flex-wrap: nowrap;
- gap: 0.25rem;
- align-items: center;
-}
-
-.pill {
- display: inline-flex;
- align-items: center;
- padding: 0.2rem 0.6rem;
- border-radius: 1rem;
- font-size: 0.75rem;
- font-weight: 500;
- white-space: nowrap;
-}
-
-#error-screen {
- width: 100%;
- align-self: stretch;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.error-card {
- background: rgba(255, 255, 255, 0.05);
- border: 0.0625rem solid var(--color-error-border);
- border-radius: var(--card-radius);
- display: flex;
- flex-direction: row;
- overflow: hidden;
- max-width: 60rem;
- width: 100%;
- backdrop-filter: blur(20px);
- box-shadow:
- 0 1.25rem 3rem rgba(0, 0, 0, 0.4),
- 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
-}
-
-.error-card-left {
- background: var(--color-error-bg);
- border-right: 0.0625rem solid var(--color-error-border);
- padding: 2.5rem 2rem;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- gap: 1rem;
- flex: 0 0 20rem;
-}
-
-.error-card-left h2 {
- font-size: 2rem;
- font-weight: 700;
- line-height: 1.2;
- letter-spacing: -0.03em;
- color: var(--color-error);
- margin: 0;
-}
-
-.error-card-left p {
- font-size: 1rem;
- color: var(--color-text-secondary);
- line-height: 1.6;
- margin: 0;
-}
-
-.error-card-right {
- flex: 1;
- padding: 2.5rem 2rem;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- gap: 0.75rem;
-}
-
-.error-detail-label {
- font-size: 0.75rem;
- font-weight: 600;
- color: var(--color-text-muted);
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-
-.error-detail-message {
- font-size: 1rem;
- color: var(--color-text-secondary);
- line-height: 1.6;
- word-break: break-word;
- margin: 0;
-}
-
-@media (orientation: portrait) {
- .content {
- padding: 1.5rem 2rem;
- align-items: flex-start;
- }
-
- #table-wrapper {
- max-width: 100%;
- }
-
- #table-title {
- font-size: 1.75rem;
- }
-
- .error-card {
- flex-direction: column;
- max-width: 100%;
- }
-
- .error-card-left {
- flex: none;
- border-right: none;
- border-bottom: 0.0625rem solid var(--color-error-border);
- }
-}
+/* Tailwind CSS, skipping Preflight (resets border/margin/padding on every
+ element via a universal selector and breaks custom-element hosts like
+
+
- + Something went wrong +
+The Airtable data could not be loaded. Please check your configuration or contact your administrator.
-
Error details
-
+
+
+ Error details
+
+