The issue is that some sizes (text, icons) are fixed in the widget’s settings, and this demo configuration wasn’t designed with phones in mind but tablets in landscape orientation. For phones in portrait orientation, Basic UI does a good job adapting the display of sitemaps according to the screen width. HABPanel doesn’t do that (so-called “responsive design”) on purpose because it led to more problems - although there’s an experimental option to enable at the dashboard-level in the latest snapshots.
If you want responsive dashboards, they are quite possible but it’s a more involved task and involves coding and good knowledge of CSS: see for instance here.
Otherwise, the idea is to design your panels and dashboards with the target device in mind - for instance, you could design separate ones for your phone and your tablet. The standard grid for HABPanel dashboards has 12 columns, so if your target device is a phone having widgets smaller than, say, 2x2 or 3x3 make little sense.
Btw, protip: if you want to design for a certain device from your desktop PC, and make sure the widgets’ contents fit in their boxes, you can use the Chrome dev tools (hit F12 when viewing the page) and enable the “Device toolbar”:
Then use the toolbar to find a device similar to yours (or add it):
