CSS for mobile - declension and other tables
I've recently started studying Hungarian, and just by luck of the draw, most of the time I'm looking things up on Wiktionary using my phone. The declension and conjugation tables are nigh unusable via mobile, as the width appears to be hard-coded at 40% (as in Module:hu-nominals) -- and on a tiny screen, that might be one table-column wide.
Would it be possible to rework how these tables are styled?
This is an issue with the most common way we make tables collapsible: by wrapping them in a div. The div doesn't scale based on the contents of the table, so you have to either set it to a fixed width (which may be too small) or a percentage width (which may also be too small, or too big). There is a newer system that I've been using that doesn't have this issue as much. It's used for Finnish and Dutch, and for Latin verbs. Do those look better to your phone?
Interesting, thank you. Latin and Dutch seem to display just fine on mobile. I also realized that the problem is not with Hungarian conjugation tables, which seem to have no width defined; this is limited to Hungarian declension tables (for both nouns and adjectives), which hard-code the width at 40%.
Is there a particular reason for limiting the width of collapsible divs? I note that {{der-top}}, for instance, implements a collapsible div with no defined width, as at 桜 (sakura, “cherry tree; cherry blossom”). Likewise for the collapsible conjugation table on Hungarian entries like lát (“to see”). If there is a concern about such divs displaying all the way across widescreen monitors, and the div content becoming unnecessarily stretched out, perhaps we could use max-width and a pixel count, instead of width and a percentage? Poking around in my browser's "inspect" mode on the látás (“sight, vision”) entry, I find that changing width: 40%; to max-width: 400px; does the trick quite well -- the table does not stretch across the whole width of my widescreen monitor, and if I shrink the window down to emulate mobile as close as I can, the table displays in a more usable fashion.
... And I just realized what you might have meant -- the table at verdedigen is probably a good example? The table at verb specio, for instance, doesn't have any length limitation at all, but verdedigen has some fun show / hide behavior. That would be preferable for Hungarian, over the current hard limit. Though I find that the show / hide behavior only works on a PC -- on mobile, everything is always showing, which makes it a bit confusing as to why the top portion of the header shows the infinitive twice.
Anyway, thank you for looking into this.
It's strange that it shows both parts of the table at all times. I would appreciate it if you could report this at the Grease Pit with any information on which tables it happens with. Currently, at least Dutch verbs and adjectives, Finnish nominals and verbs, Veps nominals and verbs, Northern Sami nominals and verbs, Proto-Indo-European nominals and verbs, Latin verbs, Proto-Italic verbs use the new system. There may be more I forgot about.
In case you're good with JavaScript, the file MediaWiki:Gadget-legacy.js, line 645 onwards.
Done and posted to Wiktionary:Grease_pit/2016/April#Problems_with_mobile_site_when_rendering_tables_with_show.2Fhide_functionality. I had a quick look at the JS file, but it seems like JS isn't even being loaded in the mobile version of the site...