Skip to content

Commit d5e4a0b

Browse files
jamiecarter7jamiecarter7
authored
Overdue calls table overflow CSS styling fix (#5616)
- On mobile the overdue patient calls table does not stay contained to the parent. - This results in horizontal scroll on mobile. ## Because Many users access the dashboard via mobile to review facility progress while travelling - this was revealed during user research. When viewing the dashboard on mobile, I spotted a horizontal scroll bug on the overdue patient calls table. ## This addresses The 'overdue patient calls' table is extending outside its parent This results in horizontal scrolling on mobile views <img width="312" alt="Screenshot 2025-06-10 at 17 54 06" src="https://github.com/user-attachments/assets/8b0a0ff6-4002-40bd-97dd-ee2329bfc753" /> After fix <img width="486" alt="Screenshot 2025-06-10 at 17 53 29" src="https://github.com/user-attachments/assets/f4d89228-d588-4c66-99d1-dd64413fc5fc" /> ## Test instructions Remove class and view the website on mobile or using the Chrome mobile browser tool.
1 parent 7b75ccc commit d5e4a0b

File tree

1 file changed

+67
-64
lines changed

1 file changed

+67
-64
lines changed

‎app/components/dashboard/hypertension/overdue_patients_called_table_component.html.erb‎

Lines changed: 67 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -11,76 +11,79 @@
1111
"Denominator" => t("overdue_patients_call_activity.percent_called_denominator", region_name: @region.name)
1212
}) %>
1313
<% end %>
14-
<%= render Dashboard::Card::TableComponent.new(id: "overdueCalledActivity") do |table| %>
15-
<% table.column_group do %>
16-
<colgroup>
17-
<col>
18-
<col class="table-divider">
19-
<col>
20-
<col class="table-divider">
21-
<col>
22-
<col class="table-divider">
23-
<col>
24-
</colgroup>
25-
<% end %>
26-
<% periods.each do |period| %>
27-
<%= table.header(period, colspan: 2) %>
28-
<% end %>
29-
<%= table.sub_header(facility? ? 'Users' : region.child_region_type.capitalize, sort_default: true, sort_method: :string) %>
14+
15+
<div class="table-responsive-md">
16+
<%= render Dashboard::Card::TableComponent.new(id: "overdueCalledActivity") do |table| %>
17+
<% table.column_group do %>
18+
<colgroup>
19+
<col>
20+
<col class="table-divider">
21+
<col>
22+
<col class="table-divider">
23+
<col>
24+
<col class="table-divider">
25+
<col>
26+
</colgroup>
27+
<% end %>
28+
<% periods.each do |period| %>
29+
<%= table.header(period, colspan: 2) %>
30+
<% end %>
31+
<%= table.sub_header(facility? ? 'Users' : region.child_region_type.capitalize, sort_default: true, sort_method: :string) %>
3032

31-
<% periods.each do %>
32-
<%= table.sub_header("Patients called") %>
33-
<%= table.sub_header("Percent") %>
34-
<% end %>
33+
<% periods.each do %>
34+
<%= table.sub_header("Patients called") %>
35+
<%= table.sub_header("Percent") %>
36+
<% end %>
3537

36-
<%= table.row do %>
37-
<tr class="row-title row-total" data-sort-method="none">
38-
<td class="row-title row-total">
39-
<%= region.name %>
40-
</td>
41-
42-
<% periods.each do |period| %>
43-
<td class="row-total ta-right">
44-
<%=total_calls(period)%>
45-
</td>
46-
<td class="type-percent" data-sort-column-key="population-coverage" data-toggle="tooltip" title="" data-original-title="<%=patients_called_tooltip(total_calls(period), overdue_patients(region, period))%>">
47-
<em data-rate="<%=percentage(total_calls(period), overdue_patients(region, period))%>" class="<%= class_names('overdue-high-is-good') %>">
48-
<%=percentage_string(total_calls(period), overdue_patients(region, period))%>
49-
</em>
50-
<span>of <%=overdue_patients(region, period)%></span>
38+
<%= table.row do %>
39+
<tr class="row-title row-total" data-sort-method="none">
40+
<td class="row-title row-total">
41+
<%= region.name %>
5142
</td>
52-
<% end %>
5343

54-
</tr>
55-
<% end %>
56-
<% children_data&.each do |(row, count_by_period)| %>
57-
<% table.row do %>
58-
<tr>
59-
<td class="row-title">
60-
<%= link_to row.name, reports_region_path(row.region, report_scope: row.region_type) unless facility?%>
61-
<%= link_to row.full_name, admin_user_path(row, period: @period) if facility?%>
44+
<% periods.each do |period| %>
45+
<td class="row-total ta-right">
46+
<%=total_calls(period)%>
47+
</td>
48+
<td class="type-percent" data-sort-column-key="population-coverage" data-toggle="tooltip" title="" data-original-title="<%=patients_called_tooltip(total_calls(period), overdue_patients(region, period))%>">
49+
<em data-rate="<%=percentage(total_calls(period), overdue_patients(region, period))%>" class="<%= class_names('overdue-high-is-good') %>">
50+
<%=percentage_string(total_calls(period), overdue_patients(region, period))%>
51+
</em>
52+
<span>of <%=overdue_patients(region, period)%></span>
6253
</td>
63-
<% periods.each do |period| %>
64-
<td class="row-total ta-right">
65-
<%= count_by_period[period] %>
54+
<% end %>
55+
56+
</tr>
57+
<% end %>
58+
<% children_data&.each do |(row, count_by_period)| %>
59+
<% table.row do %>
60+
<tr>
61+
<td class="row-title">
62+
<%= link_to row.name, reports_region_path(row.region, report_scope: row.region_type) unless facility?%>
63+
<%= link_to row.full_name, admin_user_path(row, period: @period) if facility?%>
6664
</td>
67-
<% if facility? %>
68-
<td class="type-percent" data-sort-column-key="population-coverage" data-sort="<%=percentage(count_by_period[period], overdue_patients(region, period))%>" data-toggle="tooltip" title="" data-original-title="<%=patients_called_tooltip(count_by_period[period], overdue_patients(region, period)) %>">
69-
<em data-rate="<%=percentage(count_by_period[period], overdue_patients(region, period))%>">
70-
<%=percentage_string(count_by_period[period], overdue_patients(region, period))%>
71-
</em>
72-
</td>
73-
<% else %>
74-
<td class="type-percent" data-sort-column-key="population-coverage" data-sort="<%=percentage(count_by_period[period], overdue_patients(row, period))%>" data-toggle="tooltip" title="" data-original-title="<%=patients_called_tooltip(count_by_period[period], overdue_patients(row, period)) %>">
75-
<em data-rate="<%=percentage(count_by_period[period], overdue_patients(row, period))%>" class="overdue-high-is-good">
76-
<%=percentage_string(count_by_period[period], overdue_patients(row, period))%>
77-
</em>
78-
<span>of <%= overdue_patients(row, period) %></span>
65+
<% periods.each do |period| %>
66+
<td class="row-total ta-right">
67+
<%= count_by_period[period] %>
7968
</td>
69+
<% if facility? %>
70+
<td class="type-percent" data-sort-column-key="population-coverage" data-sort="<%=percentage(count_by_period[period], overdue_patients(region, period))%>" data-toggle="tooltip" title="" data-original-title="<%=patients_called_tooltip(count_by_period[period], overdue_patients(region, period)) %>">
71+
<em data-rate="<%=percentage(count_by_period[period], overdue_patients(region, period))%>">
72+
<%=percentage_string(count_by_period[period], overdue_patients(region, period))%>
73+
</em>
74+
</td>
75+
<% else %>
76+
<td class="type-percent" data-sort-column-key="population-coverage" data-sort="<%=percentage(count_by_period[period], overdue_patients(row, period))%>" data-toggle="tooltip" title="" data-original-title="<%=patients_called_tooltip(count_by_period[period], overdue_patients(row, period)) %>">
77+
<em data-rate="<%=percentage(count_by_period[period], overdue_patients(row, period))%>" class="overdue-high-is-good">
78+
<%=percentage_string(count_by_period[period], overdue_patients(row, period))%>
79+
</em>
80+
<span>of <%= overdue_patients(row, period) %></span>
81+
</td>
82+
<% end %>
8083
<% end %>
81-
<% end %>
82-
</tr>
83-
<% end %>
84-
<% end %>
85-
<% end %>
84+
</tr>
85+
<% end %>
86+
<% end %>
87+
<% end %>
88+
</div>
8689
</div>

0 commit comments

Comments
 (0)