A focused Docker Compose management web application.
fix: lots of sizing issues
+20
-13
+3
-3
packages/panel/src/lib/style.scss
+3
-3
packages/panel/src/lib/style.scss
···
110
110
padding: 10px;
111
111
border: none;
112
112
113
-
min-width: min(calc(200px + 25vw), 500px);
113
+
width: min(calc(200px + 25vw), 500px);
114
114
115
115
&:focus-visible {
116
116
outline: 2px solid var(--lavender);
···
155
155
}
156
156
157
157
.full {
158
-
height: 100%;
159
-
width: 100%;
158
+
height: 100% !important;
159
+
width: 100% !important;
160
160
}
+12
-6
packages/panel/src/routes/(authenticated)/projects/+page.svelte
+12
-6
packages/panel/src/routes/(authenticated)/projects/+page.svelte
···
25
25
);
26
26
</script>
27
27
28
-
<div class="flexc gap-10 full" {...accordion.root}>
28
+
<div class="flexc gap-10 full projects" {...accordion.root}>
29
29
<div class="flexr center gap-10">
30
30
<Fa icon={faMagnifyingGlass} size="lg" />
31
31
<input class="full" type="text" placeholder="Search projects..." bind:value={search} />
32
32
</div>
33
33
34
-
{#each groups as [status, projects]}
34
+
{#each groups as [status, projects] (status)}
35
35
{@const item = accordion.getItem({ id: status })}
36
36
<button class="a divider" {...item.trigger} aria-label="toggle {status} projects">
37
37
<Fa icon={item.isExpanded ? faMinus : faPlus} />
···
41
41
</button>
42
42
{#if item.isExpanded}
43
43
<div class="grid" {...item.content}>
44
-
{#each projects as project}
44
+
{#each projects as project (project.name)}
45
45
<a href="/project/{project.name}" class="project">
46
46
<h2>
47
47
<StatusIcon status={project.status} />
···
70
70
</div>
71
71
72
72
<style lang="scss">
73
+
.projects {
74
+
container: projects / inline-size;
75
+
}
76
+
73
77
.divider {
74
78
display: flex;
75
79
align-items: center;
···
85
89
}
86
90
87
91
.grid {
92
+
grid-template-columns: repeat(3, minmax(0, 1fr));
88
93
display: grid;
89
-
grid-template-columns: repeat(auto-fit, minmax(300px, calc(100% / 3 - 20px)));
90
94
gap: 10px;
91
95
92
96
width: 100%;
97
+
}
93
98
94
-
@media (max-width: 425px) {
95
-
grid-template-columns: repeat(auto-fit, 100%);
99
+
@container projects (max-width: 919px) {
100
+
.grid {
101
+
grid-template-columns: 1fr;
96
102
}
97
103
}
98
104
+3
-2
packages/panel/src/routes/Dialog.svelte
+3
-2
packages/panel/src/routes/Dialog.svelte
···
100
100
101
101
padding: 10px;
102
102
103
-
transition: ease 300ms;
103
+
transition: opacity ease 300ms;
104
+
transition: scale ease 300ms;
104
105
scale: 0.95;
105
106
106
107
@media (max-width: 425px) {
···
135
136
height: 100%;
136
137
background: rgba(0, 0, 0, 0.2);
137
138
opacity: 0;
138
-
transition: ease 300ms;
139
+
transition: opacity ease 300ms;
139
140
}
140
141
141
142
[data-melt-dialog-overlay][data-open] {