DKIM Key explodes page layout

[dwydler]

Hello there,
i have done some imports of BIND zone files. Basically works as it should.

One entry in the zone file had a TXT record which contains a DKIM value. This means that the Subdomain column only shows the first letter of the DNS entry.

Is it possible to shorten the line in the Content column or make a line break?

Cheers,
Daniel

[dwydler]

Thank you for fixing it.
Is it intentional that the column is now very wide?

Perhaps you can use a auto wide function for it?!

[peterthomassen]

Width adjusts when you enter a very long record, or when you make the window smaller. Does that cover your use case?

[dwydler]

Before your change the entries in the column "Subname" were truncated.
After your change, the column "Subname" unnecessarily wide.

I think it would be better if the column "Subname" width adjusted automatically. This means it should also work with the different resolutions (Notebook, external TFT, etc.)

[peterthomassen]

When both the subname and the record content value are short, one of the columns necessarily are too wide.

I'm not sure what you mean. Would you like to submit a PR that implements the suggested behavior?

[dwydler]

I don't have much time at the moment. Before Christmas everyone goes crazy. You certainly know that.

I have created a zone domain.de. There are a total of 20 entries. The longest entry is default._domainkey.

In this case, the “Subname” column wouldn’t have to be that wide. This ensures that a horizontal scroll bar is displayed in the "Content" column for the assigned value.

Hence my suggestion that the "Subname" column only be displayed as wide as it needs to be.
I hope it is now clearer what I mean.

[peterthomassen]

Yes. Unfortunately, I don't know how to fix that; the layouting is really complicated. If you have code suggestions, please go ahead.

[dwydler]

I took a look into the css code this morning. The table layout makes it difficult.

The following line may provide a simple approach for improvements:

@media screen and (min-width: 600px) {
	[data-v-b8c16058] .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr>td:nth-child(3), [data-v-b8c16058] .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr>td:nth-child(3)>div {
		width: 45vw;
	}
}

Are there still visitors with a resolution smaller than 600px? Otherwise you could certainly adjust the value to 1280px.

Perhaps another option is an second media query. Below is a short example with exemplary sizes:

@media screen and (min-width: 1680px) {
	[data-v-b8c16058] .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr>td:nth-child(3), [data-v-b8c16058] .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr>td:nth-child(3)>div {
		width: 45vw;
	}
}
@media screen and (min-width: 3200px) {
	[data-v-b8c16058] .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr>td:nth-child(3), [data-v-b8c16058] .theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr>td:nth-child(3)>div {
		width: 70vw;
	}
}

I realize that this can't be a reference. I hope you can take a look at an analysis tool like Matomo.

P.S. At the moment I used the browser extension "User CSS" to optimize the width of the column.

[peterthomassen]

Are there still visitors with a resolution smaller than 600px?

The interface supports mobile devices, with screens less wide than 600px.

Your ideas look good. Please submit a PR if you have something working.