@@ -55,7 +55,7 @@ export default function FailureCard({
55
55
return (
56
56
< >
57
57
< div className = "p-3 border rounded-lg bg-amber-50 dark:bg-amber-950 border-amber-200 dark:border-amber-800" >
58
- < div className = "flex items-center justify-between" >
58
+ < div className = "flex flex-col sm:flex-row sm: items-center sm: justify-between gap-3 " >
59
59
< div className = "flex-1" >
60
60
< div className = "font-medium text-amber-900 dark:text-amber-200" >
61
61
{ binary_name } on { environment_name }
@@ -64,26 +64,28 @@ export default function FailureCard({
64
64
Commit: { commit_sha . substring ( 0 , 8 ) } • { formatTimestamp ( commit_timestamp || failure_timestamp ) }
65
65
</ div >
66
66
</ div >
67
- < div className = "flex items-center gap-2 ml-3 " >
67
+ < div className = "flex flex-wrap items-center gap-2" >
68
68
< Button
69
69
variant = "outline"
70
70
size = "sm"
71
71
onClick = { ( ) => setShowErrorDialog ( true ) }
72
- className = "gap-2"
72
+ className = "gap-2 whitespace-nowrap "
73
73
>
74
74
< Eye className = "w-4 h-4" />
75
- View Error
75
+ < span className = "hidden xs:inline" > View Error</ span >
76
+ < span className = "xs:hidden" > View</ span >
76
77
</ Button >
77
78
{ onDelete && id && (
78
79
< Button
79
80
variant = "outline"
80
81
size = "sm"
81
82
onClick = { ( ) => onDelete ( id ) }
82
83
disabled = { isDeleting }
83
- className = "gap-2 text-red-600 hover:text-red-700 hover:bg-red-50"
84
+ className = "gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 whitespace-nowrap "
84
85
>
85
86
< Trash2 className = "w-4 h-4" />
86
- { isDeleting ? 'Deleting...' : 'Delete' }
87
+ < span className = "hidden xs:inline" > { isDeleting ? 'Deleting...' : 'Delete' } </ span >
88
+ < span className = "xs:hidden" > { isDeleting ? '...' : '' } </ span >
87
89
</ Button >
88
90
) }
89
91
</ div >
@@ -114,9 +116,9 @@ export default function FailureCard({
114
116
115
117
return (
116
118
< >
117
- < div className = "flex items-center justify-between p-3 border rounded-lg" >
119
+ < div className = "flex flex-col sm:flex-row sm: items-center sm: justify-between p-3 border rounded-lg gap-3 " >
118
120
< div className = "flex-1" >
119
- < div className = "flex items-center gap-2" >
121
+ < div className = "flex flex-wrap items-center gap-2" >
120
122
< code className = "text-sm" > { commit_sha . substring ( 0 , 8 ) } </ code >
121
123
{ showBadges && (
122
124
< >
@@ -139,26 +141,28 @@ export default function FailureCard({
139
141
</ div >
140
142
) }
141
143
</ div >
142
- < div className = "flex items-center gap-2 ml-3 " >
144
+ < div className = "flex flex-wrap items-center gap-2" >
143
145
< Button
144
146
variant = "outline"
145
147
size = "sm"
146
148
onClick = { ( ) => setShowErrorDialog ( true ) }
147
- className = "gap-2"
149
+ className = "gap-2 whitespace-nowrap "
148
150
>
149
151
< Eye className = "w-4 h-4" />
150
- View Error
152
+ < span className = "hidden xs:inline" > View Error</ span >
153
+ < span className = "xs:hidden" > View</ span >
151
154
</ Button >
152
155
{ onDelete && id && (
153
156
< Button
154
157
variant = "outline"
155
158
size = "sm"
156
159
onClick = { ( ) => onDelete ( id ) }
157
160
disabled = { isDeleting }
158
- className = "gap-2 text-red-600 hover:text-red-700 hover:bg-red-50"
161
+ className = "gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 whitespace-nowrap "
159
162
>
160
163
< Trash2 className = "w-4 h-4" />
161
- { isDeleting ? 'Deleting...' : 'Delete' }
164
+ < span className = "hidden xs:inline" > { isDeleting ? 'Deleting...' : 'Delete' } </ span >
165
+ < span className = "xs:hidden" > { isDeleting ? '...' : '' } </ span >
162
166
</ Button >
163
167
) }
164
168
</ div >
0 commit comments