CSS problem with discourse search window after latest update

[Pravi (PK)]

Not sure its a bug or problem related to my custom CSS. Noticed since the last update.

[codinghorror (Jeff Atwood)]

This is specific to your site and CSS, because I can’t repro it here on meta.

Unless it repros here, it is unlikely to be a Discourse problem.

[Pravi (PK)]

Well, In that case, I need some help from some CSS Experts. I think something bad is in current CSS style.

@import url('https://fonts.googleapis.com/css?family=Redressed');
@import url('https://fonts.googleapis.com/css?family=Philosopher');

header #site-text-logo {
    font-size: 26px;
    //font-style: italic;
    font-family: 'Redressed', cursive;
    color: #2471a3;   //#5c998b;
    position: relative;
    top: -3px;
    left: 25px;
    filter: drop-shadow(1px 1px 1px #fff) drop-shadow(-1px 1px 1px #fff) drop-shadow(1px -1px 1px #fff);
}

.d-header {
    padding: 0;
    height: 0; 
    background-color: #323433; // Header Background color
    width: 100%;
    padding-top: 0;
    height: 48px;
    box-shadow: none;
}

.d-header  .wrap {
    background-color: #fff;
    max-width: 1144px;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}

.d-header .panel {
    top: 3px;
}

#main-outlet {
    padding-top: 70px;
}

/* lt. gray container around main content area */
#main {
  width: 1110px;
  background-color: #ffffff;
  margin: 0 auto;
  position: static;
  padding: 0 25px 25px; 
}

.title-wrapper {
    padding-bottom: 3px;
}

.extra-info-wrapper .topic-link {
    font-family: 'Philosopher', sans-serif;  
}

.extra-info-wrapper .badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
    font-size: 13px;
}

#topic-title h1 a {
    font-family: 'Philosopher', sans-serif;
}

.badge-wrapper.bullet span.badge-category {
    font-family: 'Philosopher', sans-serif;
}

.d-header-icons .badge-notification {
    margin: 5px 0;
    //background: #00AEEF;
}

.d-header .contents {
   margin: 2px 0;
}
  /* dark gray background in body */
body {
  background-color: #323433;
  //height: 100%; 
    
}
html {
  background-color: #323433; 
    
}

/* set fixed container sizes */
div.full-width {
  width: 1110px; 
}
div.container {
  width: 1110px; 
}
.admin-content {
  width: 1110px; 
}
#user-menu {
  width: 1110px; 
}
.modal-outer-container {
  width: 1110px; 
}

/* keep reply control left justified */
#reply-control {
  left: 0;
  z-index: 999; 
}
  
/* login button color tweak for consistency */
.btn-primary {
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA); 
}
  
/* top nav & admin button colors */
.nav-pills li>a:hover { /* inactive button hover (lt. blue) */
  color: #009EDA;
  background-color: #CADCEF;
  border-color: #BDBDBD; 
}
.nav-pills li.active>a, .nav-pills li>a.active { /* active button static (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33); 
}
.nav-pills li.active>a:hover, .nav-pills li>a.active:hover { /* active button hover (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image:linear-gradient(to bottom, #00AEEF, #00B0F0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33),inset 0 -1px 2px rgba(0,0,0,0.2);
  color: white; 
}
  
/* side nav button colors (profile pages, etc) */
.nav-stacked li.active a, .nav-stacked li.active a:hover { /* active button static */
  background-color: #CADCEF;
  color: #333; 
}
.nav-stacked .active .icon-chevron-right, .nav-stacked .active:hover .icon-chevron-right { /* arrow bg */
  color: #333;
  background-color: transparent;
  text-shadow: none; 
}
.nav-stacked li:hover .icon-chevron-right { /* button arrow hover */
  color: #333;
}
  
/* topic list table styling */
#topic-list tbody tr:nth-child(even) {
  background-color:#F0F0F0; 
}
#main #topic-list th {
  background-color:#E6E6E6; 
}

[Johani (Joe)]

The rule starting at line #96 in your desktop CSS is too broad.

div.container {
  width: 1110px; 
}

You’re forcing all divs with the container class to be 1110px wide. The inputs you’re having problems with inherit that width.

The real fix is that your selectors should be more specific to the elements you want to target.

However you can try something like this if you’re looking for a quick fix:

div.container {
  width: 1110px;
  max-width: 100%;
}

[Pravi (PK)]

Thanks you so much @Johani .You are a CSS God.