🔧 We have made modifications so that the language switching switch can be pressed even on small devices with low resolution.

[Corvus400]

Issue

• None.

Overview (Required)

• Depending on the resolution of the device and the font size, the language switching button would be hidden or displayed vertically, causing the design to break.
• So, when there is clearly no margin to display the language switch, the language switch on the Column side is displayed.

Movie (Optional)

Before1	Before2
before.mp4	before2.mp4

After1	After2	After3
after.mp4	after2.mp4	after3.mp4

Another option

• Incidentally, I investigated in advance that it would not be possible to meet the design requirement of moving the Language Switcher to the far right, because weight cannot be used when LazyRow is used as follows.
• If it is okay not to follow the design requirements, the problem of the Language Switcher not displaying properly or the buttons not being able to be pressed can be solved by simply changing the Row to LazyRow using the following code.

        LazyRow (
            verticalAlignment = Alignment.CenterVertically,
        ) {
            item {
                TimetableItemTag(
                    tagText = timetableItem.room.name.currentLangTitle,
                    tagColor = LocalRoomTheme.current.primaryColor,
                )
            }
            items(timetableItem.language.labels) { label ->
                Spacer(modifier = Modifier.padding(4.dp))
                TimetableItemTag(
                    tagText = label,
                    tagColor = MaterialTheme.colorScheme.onSurfaceVariant,
                )
            }
            item {
                Spacer(modifier = Modifier.weight(1f))
                if (isLangSelectable) {
                    LanguageSwitcher(
                        currentLang = currentLang,
                        onLanguageSelect = onLanguageSelect,
                    )
                }
            }
        }

another.option.mp4

[github-actions]

Snapshot diff report

File name	Image
TimetableItemDetailH eadlinePreview_compa re.png
TimetableItemDetailH eadlineWithEnglishPr eview_compare.png
TimetableItemDetailS creenTest.runTest[Ti metableItemDetailScr een - when server is operational - when launch - it should b e appropriately acce ssible]_compare.png
TimetableItemDetailS creenTest[TimetableI temDetailScreen - wh en server is operati onal - when launch - scroll - it should show scrolled sessio n detail]_compare.pn g
TimetableItemDetailS creenTest[TimetableI temDetailScreen - wh en server is operati onal - when launch - click bookmark - cl ick bookmark again - it should show unBo okmarked session]_co mpare.png
TimetableItemDetailH eadlineWithMixedPrev iew_compare.png
TimetableItemDetailS creenTest[TimetableI temDetailScreen - wh en server is operati onal - when launch - it should show sess ion detail title]_co mpare.png
TimetableItemDetailS creenTest[TimetableI temDetailScreen - wh en server is operati onal - when launch - click bookmark - it should show bookmar ked session]_compare .png
TimetableItemDetailS creenTest[TimetableI temDetailScreen - wh en server is operati onal - when font sca le is small - it sho uld show small font session detail]_comp are.png
TimetableItemDetailS creenTest[TimetableI temDetailScreen - wh en server is operati onal - when the desc ription is lengthy - it should display a more button]_compar e.png
TimetableItemDetailS creenPreview_compare .png

[Corvus400]

If the display of the language switching switch is not modified so that it is displayed after the animation finishes, in some cases the switch on the Row side is displayed after it is displayed on the Column side for a moment.
So, it was necessary to add a process to detect when the animation had finished.

[Corvus400]

Having the LanguageSwitcher lined up like this is not a very good process. 🤔
If there is a better implementation, I will follow that. 🫡

[Corvus400]

If there is no animation, the language switch suddenly appears after the page display animation is finished, so it doesn't look very good. 🤔
So I've added a fade-in animation.

[Corvus400]

Now that we know that FlowRow does not require such a complex implementation, we will rebuild the PR.