Full screen + landscape CSS is here!

[annappropriate]

The gap on top of the screen drives me nuts. I don't have that much screen space to afford fancy gaps 😅

This is the CSS behind it:

obsidian-spaced-repetition/styles.css

Lines 1 to 6 in ca4c261

	.is-mobile #sr-modal {
	--top-space: calc(var(--safe-area-inset-top) + var(--header-height) + var(--size-4-2));
	width: 100vw !important;
	height: calc(100vh - var(--top-space)) !important;
	margin-top: var(--top-space);
	}

If you want to get rid of the gap, save and enable this snippet:

.is-phone #sr-modal {
    height: 100% !important;
    width: 100% !important;
    max-width: 100%;
    max-height: 100%;
    margin: 0px !important;
}

No more gap! It's free real estate!

Happy learning 🥰

[annappropriate]

After spending another hour on it, I'm happy to present a full screen + landscape mode CSS.

.is-phone #sr-modal {
    height: 100% !important;
    width: 100% !important;
    max-width: 100%;
    max-height: 100%;
    padding-top: 0px;
}

@media only screen and (min-device-width: 480px) and (orientation: landscape) {
    .is-phone .sr-flashcard {
        flex-direction: row;
    }

    .is-phone .sr-header {
        flex-direction: column;
        flex: 0 1 0;
    }

    .is-phone .sr-content {
        flex: 1 0 0;
    }

    .is-phone .sr-response {
        flex-direction: column;
        flex: 0 1 0;
    }

    .is-phone .sr-controls {
        flex-direction: column;
    }

    .is-phone .sr-title {
        display: none;
    }

    .is-phone .sr-response-button {
        writing-mode: vertical-lr;
    }
}

Pretty neat.

[ronzulu]

Hi @annappropriate sounds good - I only use Obsidian on the desktop, so I haven't tried this out myself.

I'm wondering if you think this should be updated in the code itself?
Do you think some users would prefer the current layout?
Is the ideal to make this a user configurable setting?

[DDPF02]

Is this also possible on the desktop? I would love to have a full screen review window.

[annappropriate]

Hi @DDPF02, of course!
This CSS should get you full screen on any device:

#sr-modal {
    height: 100% !important;
    width: 100% !important;
    max-width: 100%;
    max-height: 100%;
    padding-top: 0px;
}

[annappropriate]

Hi @ronzulu,
Here are some screenshots for you to evaluate the looks on mobile.

Landscape:


Really striking difference, I could not see my card's content with the default CSS.

Portrait:

Gap is taking up noticeable space, it does not feel proportional to the content in the same way it is on the desktop.

---

So for me, there isn't much that I'd want to configure. Screen is small, I want it all to be taken by the content. I honestly believe that this is a good option for any phone user. One modification we could make to the CSS would be to have different media queries for different screen sizes, just in case tablet users would want the desktop look. Otherwise I can't think of anything. Let me know what do you think.

[DDPF02]

Hi @DDPF02, of course! This CSS should get you full screen on any device:

#sr-modal {
    height: 100% !important;
    width: 100% !important;
    max-width: 100%;
    max-height: 100%;
    padding-top: 0px;
}

@annappropriate sweet, works perfectly, thank you!

[ronzulu]

Hi @annappropriate Looks great, makes sense. Nice idea moving and rotating the "Show Answer" button in landscape mode to give additional space.

I agree, good for all phone users and doesn't warrant the work of implementing a configurable option.

@DDPF02 wondering if you have tried the standard plugin settings:

This might give you (nearly) what you are after.

Cheers
Ronny

[DDPF02]

@ronzulu Yes, I had both sliders at 100%. This is what it looks like. A lot of unused space.

[annappropriate]

This probably has to do with max-height and max-width. I think Obsidian default for --modal-max-width might be less than 100%, so that modals don't open full screen. When setting width via the sliders, only width and height are set, but max-width and max-height are unaffected. In other words, currently, the sliders control how much of the possible max size for a modal window a flashcard can occupy.
You can test this if you grab the CSS above, enable it, trigger flashcards, observe them full screen, then remove the max-width and max-height lines. The window will shrink, despite height and width still set to 100%. I guess you could modify the source code to set both height + max-height and width + max-width to mitigate the confusion.

[ronzulu]

Thanks @DDPF02, I just tried that now on my desktop and same result.

Great tech info @annappropriate sounds like a worthwhile suggestion for us to try.

[annappropriate]

I made a PR already #998