wear: adjust Chip buttons for larger text sizes

* Wear App Quality Guidelines

Author: thewizrd

wearapp/src/main/java/com/thewizrd/simpleweather/ui/components/WeatherAlertPanel.kt

@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
@@ -22,13 +23,15 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
 import androidx.wear.compose.material.Chip
 import androidx.wear.compose.material.ChipDefaults
 import androidx.wear.compose.material.Icon
 import androidx.wear.compose.material.Text
 import androidx.wear.compose.material.dialog.Dialog
+import androidx.wear.compose.ui.tooling.preview.WearPreviewFontScales
 import com.google.android.horologist.compose.navscaffold.scrollableColumn
 import com.thewizrd.common.controls.WeatherAlertViewModel
 import com.thewizrd.shared_resources.utils.getColorFromAlertSeverity
@@ -62,9 +65,14 @@ private fun WeatherAlertPanel(
     val severityColor = remember(alertSeverityColor) { Color(alertSeverityColor) }
 
     Chip(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight(),
         label = {
-            Text(text = title)
+            Text(
+                text = title,
+                overflow = TextOverflow.Ellipsis
+            )
         },
         icon = {
             Icon(
@@ -133,6 +141,7 @@ private fun WeatherAlertPanel(
 }
 
 @WearPreviewDevices
+@WearPreviewFontScales
 @Composable
 private fun PreviewWeatherAlertPanel() {
     Box(

wearapp/src/main/java/com/thewizrd/simpleweather/ui/components/WeatherDetailItem.kt

@@ -2,16 +2,15 @@ package com.thewizrd.simpleweather.ui.components
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.unit.dp
 import androidx.wear.compose.material.Chip
 import androidx.wear.compose.material.ChipDefaults
 import androidx.wear.compose.material.Text
@@ -32,7 +31,7 @@ fun WeatherDetailItem(
     Chip(
         modifier = Modifier
             .fillMaxWidth()
-            .heightIn(min = 60.dp),
+            .wrapContentHeight(),
         label = {
             Text(
                 text = spannableStringToAnnotatedString(model.label)

wearapp/src/main/java/com/thewizrd/simpleweather/ui/weather/WeatherNowScreen.kt

@@ -824,11 +824,20 @@ private fun NavigationButton(
     Chip(
         modifier = Modifier
             .fillMaxWidth()
+            .wrapContentHeight()
             .padding(vertical = 2.dp, horizontal = 16.dp),
         onClick = onClick,
         colors = ChipDefaults.secondaryChipColors(),
         label = {
-            Text(text = label)
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .wrapContentHeight(),
+                text = label,
+                overflow = TextOverflow.Ellipsis,
+                softWrap = true,
+                maxLines = 2
+            )
         },
         icon = {
             Icon(