Different layout behavior on real device and emulator (Jetpack Compose)

Question

I'm developing a new personal project using compose and the new Material 3 components and I was just using the emulator to test it, everything was looking fine. Today, I used a real device to test it (Galaxy S10E, on Android 12 - Same version as my emulator) and I noticed some differences between the app running on the emulator and on the device.

I noticed two differences:

• Action bar is not showing on emulator, but is showing on the Galaxy S10E, and I'm using the NoActionBarTheme.
• Alert Dialog is is a lot different on emulator and on real device. On emulator, alert dialog is centralized on screen and does not occupy all width, but on real device the dialog is being shown at the bottom of the screen and occupying all width, like a Modal Bottom Sheet.

Code:

package com.alexandrekva.calculadorarv

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import com.alexandrekva.calculadorarv.ui.theme.CalculadoraRVTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            CalculadoraRVTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {val openDialog = remember { mutableStateOf(true) }
                    if (openDialog.value) {
                        AlertDialog(
                            onDismissRequest = {
                                // Dismiss the dialog when the user clicks outside the dialog or on the back
                                // button. If you want to disable that functionality, simply use an empty
                                // onDismissRequest.
                                openDialog.value = false
                            },
                            title = {
                                Text(text = "Title")
                            },
                            text = {
                                Text(text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim consequat euismod. Pellentesque volutpat aliquam tortor vitae iaculis. Nulla vel felis ante. Ut ultrices a leo vitae tempus.")
                            },
                            confirmButton = {
                                TextButton(
                                    onClick = {
                                        openDialog.value = false
                                    }
                                ) {
                                    Text("Confirm")
                                }
                            },
                            dismissButton = {
                                TextButton(
                                    onClick = {
                                        openDialog.value = false
                                    }
                                ) {
                                    Text("Dismiss")
                                }
                            }
                        )
                    }
                }
            }
        }
    }
}

Theme

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.CalculadoraRV" parent="android:Theme.Material.Light.NoActionBar" />

    <style name="Theme.CalculadoraRV.Starting" parent="Theme.SplashScreen">
        <!-- Set the splash screen background, animated icon, and animation duration. -->
        <item name="windowSplashScreenBackground">@color/white</item>

        <!-- Use windowSplashScreenAnimatedIcon to add either a drawable or an
             animated drawable. One of these is required. -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_round_trending_up_24</item>
        <!-- Required for animated icons -->
        <item name="windowSplashScreenAnimationDuration">400</item>

        <!-- Set the theme of the Activity that directly follows your splash screen. -->
        <!-- Required -->
        <item name="postSplashScreenTheme">@style/Theme.CalculadoraRV</item>
    </style>
</resources>

Dependencies

    implementation 'androidx.core:core-ktx:1.8.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material3:material3:1.0.0-alpha16"
    implementation "androidx.compose.material3:material3-window-size-class:1.0.0-alpha16"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
    implementation 'androidx.activity:activity-compose:1.5.1'
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

    // Dagger Hilt
    implementation 'com.google.dagger:hilt-android:2.42'
    annotationProcessor 'com.google.dagger:hilt-compiler:2.42'
    implementation 'com.google.dagger:hilt-android:2.42'
    kapt 'com.google.dagger:hilt-compiler:2.42'
    implementation 'androidx.hilt:hilt-navigation-compose:1.0.0'


    // Splash Screen
    implementation 'androidx.core:core-splashscreen:1.0.0'

    // Navigation
    implementation 'androidx.navigation:navigation-compose:2.5.1'

    //Gson
    implementation 'com.google.code.gson:gson:2.9.1'