style: update layout and dimensions for improved responsiveness in payment app
Kim committed
May 28, 2026 at 11:26 UTC
4e2fd7eccc5ff273b212cfe9a65d7aa8d09ff9a1
2 files changed
+21
-22
cmd/payment-app/handler.go
+15
-17
@@ -38,32 +38,33 @@ var (
38
body {
39
margin: 0;
40
min-height: 100vh;
41
- display: grid;
42
- place-items: center;
43
- padding: 22px;
41
+ display: flex;
42
+ padding: 0;
43
background: #f7f8fb;
44
color: #182033;
45
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
46
}
47
main {
49
- width: min(100%, 720px);
48
+ display: grid;
49
+ width: 100%;
50
+ min-height: 100vh;
51
+ grid-template-rows: minmax(0, 1fr) auto;
52
overflow: hidden;
51
- border: 1px solid #d9e1ea;
52
- border-radius: 8px;
53
background: #ffffff;
54
- box-shadow: 0 18px 42px rgba(24, 32, 51, 0.14);
54
}
55
img {
56
width: 100%;
58
- aspect-ratio: 16 / 10;
57
+ height: 100%;
58
+ min-height: 0;
59
display: block;
60
- object-fit: cover;
61
- background: #dfe6ee;
60
+ object-fit: contain;
61
+ background: #111827;
62
}
63
section {
64
display: grid;
65
- gap: 14px;
66
- padding: 22px;
65
+ gap: 10px;
66
+ padding: 18px;
67
+ border-top: 1px solid #e5eaf0;
68
}
69
.eyebrow {
70
margin: 0;
@@ -88,10 +89,8 @@ var (
89
dl {
90
display: grid;
91
grid-template-columns: repeat(3, 1fr);
91
- gap: 12px;
92
+ gap: 10px;
93
margin: 4px 0 0;
93
- padding-top: 16px;
94
- border-top: 1px solid #e5eaf0;
94
}
95
div { min-width: 0; }
96
dt {
@@ -107,8 +106,7 @@ var (
106
font-weight: 750;
107
}
108
@media (max-width: 640px) {
110
- body { padding: 12px; }
111
- section { padding: 18px; }
109
+ section { padding: 14px; }
110
dl { grid-template-columns: 1fr; }
111
}
112
</style>
cmd/payment-app/static/style.css
+6
-5
@@ -155,7 +155,8 @@ dd {
155
}
156
157
.preview.is-active {
158
- min-height: 680px;
158
+ height: min(680px, calc(100vh - 84px));
159
+ min-height: 560px;
160
background: #ffffff;
161
}
162
@@ -316,8 +317,8 @@ dd {
317
}
318
319
.preview.is-active {
319
- height: 660px;
320
- min-height: 660px;
320
+ height: min(660px, calc(100vh - 36px));
321
+ min-height: 560px;
322
}
323
}
324
@@ -340,8 +341,8 @@ dd {
341
}
342
343
.preview.is-active {
343
- height: 620px;
344
- min-height: 620px;
344
+ height: min(620px, calc(100vh - 28px));
345
+ min-height: 520px;
346
}
347
348
.preview-body::before {