@@ -141,46 +141,58 @@ export default {
141
141
/ >
142
142
< / div>
143
143
144
- < div class = " gl-flex gl-items-center gl-gap-2" data- testid= " time-tracking-body" >
144
+ < div
145
+ class = " time-tracking-body gl-flex gl-flex-wrap gl-items-center gl-gap-2"
146
+ data- testid= " time-tracking-body"
147
+ >
145
148
< template v- if = " totalTimeSpent || timeEstimate" >
146
- < span class = " gl-text-subtle" > {{ s__ (' TimeTracking|Spent' ) }}< / span>
147
- < gl- button
148
- v- if = " canUpdate"
149
- v- gl- modal= " timeTrackingModalId"
150
- v- gl- tooltip= " s__('TimeTracking|View time tracking report')"
151
- variant= " link"
152
- data- testid= " view-time-spent-button"
149
+ < div
150
+ class = " time-tracking-spent-and-progress gl-flex gl-grow gl-flex-wrap-reverse gl-items-center gl-justify-between gl-gap-2"
153
151
>
154
- {{ humanTotalTimeSpent }}
155
- < / gl- button>
156
- < template v- else >
157
- {{ humanTotalTimeSpent }}
158
- < / template>
159
- < template v- if = " timeEstimate" >
160
- < gl- progress- bar
161
- v- gl- tooltip= " progressBarTooltipText"
162
- class = " gl-mx-2 gl-grow"
163
- : value= " timeRemainingPercent"
164
- : variant= " progressBarVariant"
165
- / >
166
- < span class = " gl-text-subtle" > {{ s__ (' TimeTracking|Estimate' ) }}< / span>
167
- < gl- button
168
- v- if = " canUpdate"
169
- v- gl- modal= " setTimeEstimateModalId"
170
- v- gl- tooltip= " s__('TimeTracking|Set estimate')"
171
- variant= " link"
172
- data- testid= " set-estimate-button"
173
- >
174
- {{ humanTimeEstimate }}
175
- < / gl- button>
176
- < template v- else >
177
- {{ humanTimeEstimate }}
152
+ < div class = " gl-flex gl-items-center gl-gap-2" >
153
+ < span class = " gl-text-subtle" > {{ s__ (' TimeTracking|Spent' ) }}< / span>
154
+ < gl- button
155
+ v- if = " canUpdate"
156
+ v- gl- modal= " timeTrackingModalId"
157
+ v- gl- tooltip= " s__('TimeTracking|View time tracking report')"
158
+ variant= " link"
159
+ data- testid= " view-time-spent-button"
160
+ >
161
+ {{ humanTotalTimeSpent }}
162
+ < / gl- button>
163
+ < template v- else >
164
+ {{ humanTotalTimeSpent }}
165
+ < / template>
166
+ < / div>
167
+ < template v- if = " timeEstimate" >
168
+ < gl- progress- bar
169
+ v- gl- tooltip= " progressBarTooltipText"
170
+ class = " time-tracking-progress gl-min-w-11 gl-grow"
171
+ : value= " timeRemainingPercent"
172
+ : variant= " progressBarVariant"
173
+ / >
178
174
< / template>
175
+ < / div>
176
+ < template v- if = " timeEstimate" >
177
+ < div class = " gl-flex gl-items-center gl-gap-2" >
178
+ < span class = " gl-text-subtle" > {{ s__ (' TimeTracking|Estimate' ) }}< / span>
179
+ < gl- button
180
+ v- if = " canUpdate"
181
+ v- gl- modal= " setTimeEstimateModalId"
182
+ v- gl- tooltip= " s__('TimeTracking|Set estimate')"
183
+ variant= " link"
184
+ data- testid= " set-estimate-button"
185
+ >
186
+ {{ humanTimeEstimate }}
187
+ < / gl- button>
188
+ < template v- else >
189
+ {{ humanTimeEstimate }}
190
+ < / template>
191
+ < / div>
179
192
< / template>
180
193
< gl- button
181
194
v- else - if = " canUpdate"
182
195
v- gl- modal= " setTimeEstimateModalId"
183
- class = " gl-ml-auto"
184
196
variant= " link"
185
197
data- testid= " add-estimate-button"
186
198
>
0 commit comments