Monorepo for Tangled
tangled.org
appview/pages: improve timeline 3-col layout width on large screens
switch home/mission control to fractional columns with per-column
max-widths and a 1920px outer cap.
resolves [TAN-505](https://linear.app/tangled/issue/TAN-505)
Signed-off-by: eti <eti@eti.tf>
author
eti
date
(Jun 12, 2026, 10:58 PM +0200)
commit
97dc6ded
97dc6ded8d2dd80f7f99e82fc7a8770301f79ce5
parent
75b3402c
75b3402c381d10b5fbca0f3fd9a1a2a76938c686
+6
-6
+1
-1
appview/pages/templates/timeline/fragments/timeline.html
+1
-1
appview/pages/templates/timeline/fragments/timeline.html
···
1
1
{{ define "timeline/fragments/timeline" }}
2
-
<div id="timeline-feed" class="py-4">
2
+
<div id="timeline-feed" class="mt-4 py-4">
3
3
<div class="flex items-center justify-between pl-4 pb-4">
4
4
<h3 class="text-base dark:text-white flex items-center gap-2">
5
5
{{ i "gallery-vertical" "size-4 flex-shrink-0" }}
+5
-5
appview/pages/templates/timeline/timeline.html
+5
-5
appview/pages/templates/timeline/timeline.html
···
8
8
{{ end }}
9
9
10
10
{{ define "mainLayout" }}
11
-
<div class="flex-grow flex flex-col">
11
+
<div class="flex-grow flex flex-col -mt-4">
12
12
<main class="flex-grow flex flex-col">{{ block "content" . }}{{ end }}</main>
13
13
</div>
14
14
{{ end }}
15
15
16
16
{{ define "content" }}
17
-
<div id="timeline-grid" class="flex flex-col md:grid md:grid-cols-8 md:items-start">
17
+
<div id="timeline-grid" class="flex flex-col w-full max-w-[1920px] mx-auto md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_minmax(0,1fr)] md:items-start">
18
18
19
-
<div class="hidden md:flex md:col-span-2 md:flex-col md:gap-4 md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4">
19
+
<div class="hidden md:flex md:flex-col md:gap-4 md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4 md:w-full md:max-w-[400px]">
20
20
{{ template "timeline/fragments/notifications" . }}
21
21
{{ template "timeline/fragments/recents" . }}
22
22
</div>
23
23
24
-
<div class="order-2 md:order-none md:col-start-3 md:row-start-1 md:col-span-4">
24
+
<div class="order-2 md:order-none md:col-start-2 md:row-start-1 md:w-full md:max-w-[600px] md:mx-auto">
25
25
{{ template "timeline/fragments/timeline" . }}
26
26
</div>
27
27
28
-
<div class="order-1 md:order-none flex flex-col gap-4 md:col-start-7 md:row-start-1 md:col-span-2 md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4">
28
+
<div class="order-1 md:order-none flex flex-col gap-4 md:col-start-3 md:row-start-1 md:w-full md:max-w-[400px] md:ml-auto md:pt-4 md:px-4 md:sticky md:top-0 md:h-screen md:overflow-y-auto md:pb-4">
29
29
{{ if .ShowNewsletter }}
30
30
<div id="newsletter-col" class="order-first md:order-last">
31
31
{{ template "timeline/fragments/newsletterWidget" . }}