mobile table bug fix

src/components/Dropdown.tsx

@@ -111,7 +111,7 @@ export default function Dropdown({
     <div className="dropdown">
       <button
         aria-expanded={open}
-        className="btn btn-outline-secondary dropdown-toggle w-100"
+        className="btn btn-outline-secondary dropdown-toggle overflow-hidden w-100"
         id={filter}
         onClick={() => setDropdown(open ? undefined : filter)}
       >

src/components/Table.tsx

@@ -105,11 +105,15 @@ export default function Table({
         </div>
       );
     } else if (key === 'distance' && meeting.distance) {
-      return i18n(
-        settings.distance_unit === 'km'
-          ? strings.distance_km
-          : strings.distance_mi,
-        { distance: meeting.distance }
+      return (
+        <div className="align-items-baseline d-flex flex-wrap justify-content-sm-end">
+          <span className="fs-5 me-1">
+            {meeting.distance.toLocaleString(navigator.language)}
+          </span>
+          <small className="text-muted">
+            {strings[settings.distance_unit]}
+          </small>
+        </div>
       );
     } else if (key === 'location') {
       return meeting.location;

src/helpers/data/calculate-distances.ts

@@ -1,6 +1,7 @@
 import type { Index, Meeting, State } from '../../types';
-import { settings } from '../settings';
+import { settings, strings } from '../settings';
 import { flattenAndSortIndexes } from './flatten-and-sort-indexes';
+import { formatString as i18n } from '../format';
 
 //calculate distances
 export function calculateDistances(
@@ -17,7 +18,12 @@ export function calculateDistances(
   settings.distance_options.forEach(option => {
     distances[option] = {
       key: option.toString(),
-      name: `${option} ${settings.distance_unit}`,
+      name: i18n(
+        settings.distance_unit === 'km'
+          ? strings.distance_km
+          : strings.distance_mi,
+        { distance: option }
+      ),
       slugs: [],
       children: [],
     };
@@ -94,6 +100,14 @@ export function getDistance(
     // If using kilometers, do an additional multiplication
     if (settings.distance_unit === 'km') dist *= 1.609344;
 
-    return parseFloat(dist.toFixed(2));
+    if (dist < 10) {
+      return Math.round(dist * 100) / 100;
+    }
+
+    if (dist < 100) {
+      return Math.round(dist * 10) / 10;
+    }
+
+    return Math.round(dist);
   }
 }

src/helpers/data/distance.spec.ts

@@ -24,19 +24,19 @@ describe('distance', () => {
   //miles
   it.each`
     a                                    | b                                    | expected
-    ${{ latitude: 1, longitude: 1 }}     | ${{ latitude: 2, longitude: 2 }}     | ${97.69}
-    ${{ latitude: 10, longitude: 10 }}   | ${{ latitude: 20, longitude: 20 }}   | ${959.82}
-    ${{ latitude: 100, longitude: 100 }} | ${{ latitude: 200, longitude: 200 }} | ${7697.83}
+    ${{ latitude: 1, longitude: 1 }}     | ${{ latitude: 2, longitude: 2 }}     | ${97.7}
+    ${{ latitude: 10, longitude: 10 }}   | ${{ latitude: 20, longitude: 20 }}   | ${960}
+    ${{ latitude: 100, longitude: 100 }} | ${{ latitude: 200, longitude: 200 }} | ${7698}
   `('miles: yields $expected with $a and $b', ({ a, b, expected }) => {
     expect(getDistance(a, b)).toStrictEqual(expected);
   });
 
   //kilometers
   it.each`
     a                                    | b                                    | expected
-    ${{ latitude: 1, longitude: 1 }}     | ${{ latitude: 2, longitude: 2 }}     | ${157.22}
-    ${{ latitude: 10, longitude: 10 }}   | ${{ latitude: 20, longitude: 20 }}   | ${1544.68}
-    ${{ latitude: 100, longitude: 100 }} | ${{ latitude: 200, longitude: 200 }} | ${12388.45}
+    ${{ latitude: 1, longitude: 1 }}     | ${{ latitude: 2, longitude: 2 }}     | ${157}
+    ${{ latitude: 10, longitude: 10 }}   | ${{ latitude: 20, longitude: 20 }}   | ${1545}
+    ${{ latitude: 100, longitude: 100 }} | ${{ latitude: 200, longitude: 200 }} | ${12388}
   `('kilometers: yields $expected with $a and $b', ({ a, b, expected }) => {
     settings.distance_unit = 'km';
     expect(getDistance(a, b)).toStrictEqual(expected);

src/i18n/en.ts

@@ -29,12 +29,14 @@ export const en: Translation = {
   get_directions: 'Get Directions',
   in_progress_single: '1 meeting in progress',
   in_progress_multiple: '%count% meetings in progress',
+  km: 'km',
   location: 'Location',
   location_group: 'Location / Group',
   match_single: '1 result',
   match_multiple: '%count% results',
   meeting_information: 'Meeting Information',
   meetings: 'Meetings',
+  mi: 'mi',
   midday: 'Midday',
   midnight: 'Mid',
   modes: {

src/i18n/es.ts

@@ -29,12 +29,14 @@ export const es: Translation = {
   get_directions: 'Obtener las direcciones',
   in_progress_single: '1 reunión en curso',
   in_progress_multiple: '%count% reuniones en curso',
+  km: 'km',
   location: 'Ubicación',
   location_group: 'Ubicación / Grupo',
   match_single: '1 resultado',
   match_multiple: '%count% resultados',
   meeting_information: 'Información de la reunión',
   meetings: 'Reuniones',
+  mi: 'mi',
   midday: 'Mediodía',
   midnight: 'Medianoche',
   modes: {

src/i18n/fr.ts

@@ -29,12 +29,14 @@ export const fr: Translation = {
   get_directions: 'Obtenir des itinéraires',
   in_progress_single: '1 réunion en cours',
   in_progress_multiple: '%count% rendez-vous en cours',
+  km: 'km',
   location: 'Emplacement',
   location_group: 'Emplacement / Groupe',
   match_single: '1 résultat',
   match_multiple: '%count% résultats',
   meeting_information: 'Informations sur la réunion',
   meetings: 'Rencontres',
+  mi: 'mi',
   midday: 'Midi',
   midnight: 'Minuit',
   modes: {

src/i18n/ja.ts

@@ -29,12 +29,14 @@ export const ja: Translation = {
   get_directions: '行き方を調べる',
   in_progress_single: '1件のミーティングが進行中です',
   in_progress_multiple: '%count% ミーティングが進行中です',
+  km: 'キロ',
   location: '位置',
   location_group: '場所・グループ',
   match_single: '1件の結果',
   match_multiple: '%count% の結果',
   meeting_information: 'ミーティング情報',
   meetings: 'ミーティング',
+  mi: 'マイル',
   midday: '昼',
   midnight: '夜中',
   morning: '朝',
@@ -64,7 +66,7 @@ export const ja: Translation = {
     region: '%region%で',
     search_with: '%search% を含む',
     search_near: '%search%付近',
-    distance: '%距離%以内',
+    distance: '%distance%以内',
   },
   type_any: '種類指定無し',
   type_descriptions: {

src/i18n/sv.ts

@@ -29,12 +29,14 @@ export const sv: Translation = {
   get_directions: 'Få Vägbeskrivning',
   in_progress_single: '1 möte pågår',
   in_progress_multiple: '%count% möten pågår',
+  km: 'km',
   location: 'Plats',
   location_group: 'Plats / Grupp',
   match_single: '1 resultat',
   match_multiple: '%count% resultat',
   meeting_information: 'Mötes Information',
   meetings: 'Möten',
+  mi: 'mi',
   midday: 'Mitt på dagen',
   midnight: 'Midnatt',
   modes: {

src/style.scss

@@ -365,25 +365,24 @@ div.tsml-ui {
     @include media-breakpoint-down(md) {
       tr {
         border-top: 1px solid $gray-300;
+        min-height: 110px;
         padding: 6px 12px;
         position: relative;
 
         td {
           border: 0;
           padding: 0 0 0 96px;
 
-          &.time {
+          &.time,
+          &.distance {
             left: 16px;
             padding-left: 0;
             position: absolute;
-            width: 88px;
+            width: 83px;
           }
 
           &.distance {
-            font-size: 24px;
-            left: 16px;
-            padding-left: 0;
-            position: absolute;
+            line-height: 1.15;
             top: 56px;
           }
         }

src/types/Translation.ts

@@ -29,12 +29,14 @@ export interface Translation {
   get_directions: string;
   in_progress_single: string;
   in_progress_multiple: string;
+  km: string;
   location: string;
   location_group: string;
   match_single: string;
   match_multiple: string;
   meeting_information: string;
   meetings: string;
+  mi: string;
   midday: string;
   midnight: string;
   morning: string;