How to Fix the DNN file manager appearance

Sometimes the File Manager does not fit in the content area. I got this issue in many skins that use vertical navigation. To fix it, we just have to put a fixed width using the FileManager CSS class in skin.css or in portal.css which is easier for administrators because they can edit this file in Site Settings (Stylesheet Editor). We can also use the !important keyword to make sure that our style will be applied no matter what.

.FileManager{width:680px !important;}

In the above, we can adjust the width upon our skin's needs.
Another thing that looks annoying in the File Manager when our skin's default font size is larger than 11px, is that many labels or even the file names in the list, wrap and the whole thing becomes a mess. Adding one more line in our skin.css or portal.css, we can fix that too.

.FileManager{width:680px !important;}
.FileManager *{font-size:11px !important;} 

In general, we can update about anything in the File Manager appearance using the FileManager CSS class. For example we could also add a background color or change the font color, to make it look OK with skins that use a dark background.
I hope you find this tip useful.