Resize components for small screens with high resolution

[kkettinger]

Hi there,

I'm using svelteui for a 10" touchscreen interface with high resolution (~1920x1080p). All components are very small, even when using size="xl". Is there any way to make the components even bigger? Or perhaps emulate a different DPI setting on the browser so that the components are rendered larger?

I'm grateful for any help.
Thanks in advance.

Kevin

[BeeMargarida]

Hum, I have no idea right now, I'll explore a solution.

[BeeMargarida]

Have you tried some of these things? https://stackoverflow.com/questions/26024838/website-on-high-resolution-screen-is-too-small

[kkettinger]

Thanks, i found a solution: As i'm using tailwindcss, i just replace the base font-size with a higher value, and everything just scales.

Changes i made in the tailwind.config.cjs:

const plugin = require('tailwindcss/plugin');

const config = {
// ...
  plugins: [
    plugin(function({ addBase }) {
      addBase({
         'html': { fontSize: "24px" },
       })
     }),
  ],
};

module.exports = config;

[BeeMargarida]

That's great! I wonder if changing the global font size of the SvelteUI theme would also fix this issue

[kkettinger]

I'd like to try, do you know how and where i can change it?

[BeeMargarida]

It could work by creating a custom theme that extends the default one and only overrides the font sizes, like

<script>
import { SvelteUIProvider, createTheme, useSvelteUITheme } from '@svelteuidev/core';
const newTheme = createTheme('new',{
	...useSvelteUITheme(),
        fontSizes: {
	      xs: '20px',
	      sm: '22px',
	      md: '24px',
	      lg: '26px',
	      xl: '28px',
      }
});
</script>

<SvelteUIProvider class={newTheme}>
	<slot />
</SvelteUIProvider>

There might be components that have the font size hardcoded (not using the variables xs, sm, etc), and that would be problematic for this. If you find any of these problems, please let us know so that we can fix it.