Material 3 Theme fixes. (#707)

* fixed issues with avatar tag setter, viewing images and message box dialog overflowing out of view * fixed other elements being corrupted by previous changes * made table text selectable, fixed padding with buttons.
vrcx-team · Dec 23, 2023 · ebf27cb · ebf27cb
1 parent 244735b
commit ebf27cb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/html/src/index.pug b/html/src/index.pug
@@ -702,7 +702,7 @@ html
                                         span.name {{ $t('dialog.world.info.memo') }}
                                         el-input.extra(v-model="worldDialog.memo" type="textarea" :rows="2" :autosize="{ minRows: 1, maxRows: 20 }" :placeholder="$t('dialog.world.info.memo_placeholder')" size="mini" resize="none")
                                 div(style="width:100%;display:flex")
-                                    .x-friend-item(style="width:350px;cursor:default")
+                                    .x-friend-item(style="width:100%;cursor:default")
                                         .detail
                                             span.name {{ $t('dialog.world.info.id') }}
                                             span.extra {{ worldDialog.id }}

diff --git a/html/src/mixins/tabs/playerList.pug b/html/src/mixins/tabs/playerList.pug
@@ -45,7 +45,7 @@ mixin playerListTab()
                             span.name {{ $t('dialog.world.info.created_at') }}
                             span.extra {{ currentInstanceWorld.ref.created_at | formatDate('long') }}
             div.photon-event-table(v-if="photonLoggingEnabled")
-                div(style="position:absolute;width:600px;margin-left:195px;z-index:1")
+                div(style="position:absolute;width:600px;margin-left:215px;z-index:1")
                     el-select(v-model="photonEventTableTypeFilter" @change="photonEventTableFilterChange" multiple clearable collapse-tags style="flex:1;width:220px" :placeholder="$t('view.player_list.photon.filter_placeholder')")
                         el-option(v-once v-for="type in photonEventTableTypeFilterList" :key="type" :label="type" :value="type")
                     el-input(v-model="photonEventTableFilter" @input="photonEventTableFilterChange" :placeholder="$t('view.player_list.photon.search_placeholder')" clearable style="width:150px;margin-left:10px")

diff --git a/html/src/theme.material3.scss b/html/src/theme.material3.scss
@@ -523,6 +523,7 @@ input[type='number'],
     border-radius: 24px;
     overflow-x: auto;
     white-space: normal;
+    user-select: text;
 }
 .el-table .el-table__body-wrapper table {
     width: 100%;
@@ -1123,7 +1124,7 @@ input[type='number'],
 }
 
 .el-tabs__header {
-    padding: 12px 0;
+    padding: 5px;
     border-bottom: 1px solid rgb(var(--md-sys-color-outline-variant));
 }
 
@@ -1318,11 +1319,13 @@ img.x-link.el-popover__reference {
 *:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog)
     > .el-dialog {
     width: auto !important;
+    max-width: 1125px !important;
 }
 *:not(.x-user-dialog, .x-world-dialog, .x-avatar-dialog, .x-group-dialog)
     > .el-dialog
     > .el-dialog__body {
     overflow-y: auto;
+    max-height: 825px;
 }
 .el-dialog {
     border-radius: 28px;
@@ -1338,6 +1341,8 @@ img.x-link.el-popover__reference {
     border: none;
     border-radius: 28px;
     padding: 24px;
+    width: 500px;
+    word-break: break-all;
 }
 .el-message-box > *,
 .el-dialog > * {
@@ -1901,10 +1906,6 @@ i.x-user-status {
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
 }
-
-.x-friend-item[style*='width: 350px;'] {
-    width: auto !important;
-}
 .x-friend-list > .x-friend-group:first-child {
     color: rgb(var(--md-sys-color-on-surface));
     font-family: var(--md-sys-typescale-label-large-font);